How can I close a custom select component when I click somewhere else?

Ask us anything How do I?
1

I’m currently building my own Select component with WeWeb and I’m missing a Focus Out or Lost Focus event. I want the options panel to close when I click outside the component, similar to standard select behavior. How can I achieve that?

Thanks in advance,
Andy

2

When you open the select, create a backdrop that fills the whole screen.
You set this to position fixed from 0,0 and 100% height and width.
It can be completely invisible or you can use transparency to dim the backdrop.

Using z-index you position this element above your other content, and below your select component.

Create an on click workflow on this that closes the select.
You’ll have to use the stop click propagarion workflow action on your select, to avoid a click inside your select to trigger the closing workflow.

3

Hey @thomlov, thank you so much! Great idea… I will follow this approach… :star_struck::pray:
One more question: keyboard events are not supported yet by WeWeb, right? So that I could also implement the select-close by pressing ESC, for example!?!

Best,
Andy

4

App level and page level workflows can be triggered by key up or key down events, so you can achieve this.

1 Like