I have a dropdown menu (see below) that I want to close when any menu item is selected. This is not a navigation menu, the user selecting a menu item just changes some stuff on the current page without navigating to a new page.
I’m not seeing any setting for this either in the top-level “Dropdown” element or any of its constituent parts.
I would typically solve this by binding the display or conditional rendering to a variable with an action to set the value of that variable, but in this case since the display logic is internal to the component and not exposed I’m not sure how to do this without interfering with the existing logic.
Hey @gduteaud
Yep, it’s not available on the native component. I think the best way would be to recreate a component with all the interactions you want.
Thanks for confirming. Wow, that’s infuriating! Lately I’m discovering so many cumulative small issues like with WeWeb this that we’re seriously considering just switching over to Vue.
It would be pretty easy to rebuild that component with the behavior that you want. WeWeb gives you all the tools to do that with the creation of component and its scoped variables and workflows — fully in No-Code
@jptrinh@luka I’ve been advised to use a modal to get the functionality where a dropdown/select closes on moving cursor outside of the bounds for free. I use the select to get the functionality where it closes on select for free. I’ve learned that you get dropdown placement for free when using a dropdown. See screenshots below for examples using custom, select and dropdown (none which close on mouse leave. Is there not an out of the box component that does all this?
In liueu of that I feel like I have to build an element that resembles a select for the trigger which opens a native modal (precisely placed relative to that trigger) which gets me the on backdrop click and mouse leave for free with the modal and allows me to build a workflow which closes said modal when an option within the dropdown is clicked. Is this really the only way?
We should be releasing an update to the dropdown element early November which will allow you to open/close/toggle the dropdown from anywhere on the page or inside the dropdown. Would this help you? Also, we will be releasing a new Select element which will be much more customizable to this might help you as well.
I have a modified div that has an on-click-outside method if you want. HMU in the DMs, this adds an option to do anything, not just a dropdown “clickable outside”
It’s very possible! Tag me when y’all release it. I can test it and provide additional feedback if desired.
To add more details to my previous post, and provide more insight on what problems I am trying to solve…the date dropdown is a custom component while the filters are native dropdowns styled to look like a select. I’ve moved away from the selects since they felt limiting (at least based on my knowledge of WeWeb at the time)—eg displaying both the relative and absolute dates in the date selector, along with the custom date workflow, and the out of the box multiselect for the filters couldn’t achieve the style I was going for, eg [first selected filter +X more].
I found another thread which suggested adding a layer called “backdrop” and setting that to fixed position, with 100% height and width, with a z-index just below my element—in this case my custom date dropdown— and applying the onclick on that invisible element. This allowed me to design the date dropdown to behave in the same way as the category and publisher dropdowns masking as multiselect input.
So I at least have them all behaving the same way which avoids having to teach users multiple patterns. However, since my multi selects auto apply on check, the user has to close the dropdown by clicking outside of it, as opposed to mouse leave which is what I think users would find more desirable. My desired outcome is that all these elements behave similarly—on a single select, the dropdown would close on mouse leave or selecting an option, and for the multiselect it would close on mouse leave. I’m sure I could figure this out, but for the time being I’m content with the close on click in the “backdrop”.
Really thankful for the offer! I’ve found a hack that holds me over for now, but I’ll definitely want to come back to this and do it the right way.
I found another thread where you shared the JS to achieve this. I’m definitely considering booking some consulting time with you to learn more about that and have you help me unlock that realm of capabilities. I appreciate all your expertise that you share here in the Community!!
