What about closing dropdown when clicking elsewhere

[vedmant]

What about closing dropdown when clicking elsewhere? That's default behavior of all dropdowns.

[arimendelow]

Create a transparent button the size of the entire screen that closes the dropdown, and put it between your dropdown and the rest of your site.

[vedmant]

@arimendelow The problem here is that other elements will not work when you click somewhere also mouse pointer will not change when you hovering other elements. So with this approach you need to click twice to click some other button when dropdown is active, that's not desired behaviour.

[arimendelow]

That’s generally what sites do, but you could also have a click event listener that closes the menu for any click of the mouse.

[vedmant]

@arimendelow Popular UI frameworks handle this the proper way:
https://bootstrap-vue.org/docs/components/dropdown#dropdowns
https://vuetifyjs.com/en/components/buttons/#button-dropdown-variants
https://quasar.dev/vue-components/editor#Dropdowns

This is what I find problematic with Tailwind is that it requires to reinvent the wheel in many cases.

[arimendelow]

Tailwind is just a better way to write CSS. If you want full components, look into Tailwind UI. They’re doing amazing work on it!

[arimendelow]

To clarify: TW is not a UI framework. UI frameworks are opinionated and not suitable for devs that want to take ownership over the design of their application

[OlamiBounty]

You will have to implement that yourself.

[vedmant]

@arimendelow for sure that what everyone says, but for me main issue with using Tailwind is reinventing wheel in many cases or adding non various Tailwind third party components with it's own styles and different vendors.

Why then there is dropdown example at all if this is only CSS framework. Just means that there is a huge demand for standard components like dropdowns / modals.

Looking forward to Tailwind UI framework.