#140 Click outside to close Menu with Stimulus-Use
12/08/2023
Free
Click outside element to hide it
- this might be one of the most common javascript tasks!
We will leverage Stimulus-use and it's clickOutside behaviour to trigger an action on a stimulus controller. In our case - to close the dropdown menu.
Episode source code: https://github.com/corsego/138-tailwind-layout/commit/f58de741ddd87b52ededc1fcee5b7d0b8f67f229
Based on this blogpost: https://blog.corsego.com/tailwindcss-dropdown
P.S. π Really, I just forgot to include this feature in the previous episode, so here you go. This might be my shortest episode yet!
0
Sign in to join the conversation
Featured in playlists
![#138 Responsive Layout with Sidebar and Navbar](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg5MCwicHVyIjoiYmxvYl9pZCJ9fQ==--20f38afc454180eb5a08327b9629d846e64c1849/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#139 Advanced Navbar Dropdown Menu](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTkwMCwicHVyIjoiYmxvYl9pZCJ9fQ==--cd4b7cf897374899e30004392d15c095c38f9999/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#140 Click outside to close Menu with Stimulus-Use](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1OCwicHVyIjoiYmxvYl9pZCJ9fQ==--7ca40fc28c88f131fd3eb23fbe0b8c8518c3c577/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
+5
Tailwind on Rails
Stop copypasting CSS and Javascript UI elements!
Learn to write your own!
Really, there are like 50 classes that you need to remember and you're set for life!
Recommended based on what you are watching now
![#48 Gem Rolify for assigning user roles - Complete Guide](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5NywicHVyIjoiYmxvYl9pZCJ9fQ==--35355f0c445b8df62006b0b2680e2c75a432e94e/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
29:24
#48 Gem Rolify for assigning user roles - Complete Guide
30/07/2021
Free
![#20 ActiveStorage - attach avatar, attach images](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg1OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2ed5a9c8b1ced6c81ab0ef47b4b1d65fa42c1486/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
15:19
#20 ActiveStorage - attach avatar, attach images
10/05/2021
Free