Dropdown events

Although the top-level component is tagless, it does fire a few events
that you can use to react to changes in the state of the dropdown.

This has no mystery.

onOpen(dropdown, event?)

Pretty self-explanatory. The dropdown argument in the signature
is the public API of the component. The event argument will be passed if
this event is fired as a consequence of another event (e.g. a click), but will be
undefined if it was fired programmatically.

What kinds of things you can do with this event?

In general when you want to do something outside the component when this loads.
By example, you can delay the loading of some data until the dropdown is opened.

Template

Javascript

Result

Click me

There is something you should know about this hook: If you return false;
from it you will prevent the component from opening.

Let's use this feature along with the public API and event received as aguments to do a
nifty trick. We are going to iterate over the example above so we prevent
the component from opening, load the users and once loaded we open it.

Template

Javascript

Result

Click me

For the record, I don't think this is good UX

onClose(dropdown, event?)

Symmetrically, you can perform on action when the dropdown is closed. For example, save
the a user selection, and you can also return false to prevent the component
from closing.

Example: Create a dropdown with some checkboxes inside, and don't allow it to close
until one checkbox is selected.

Template

Javascript

Result

Click me

Cruel, isn't it?

onFocus(dropdown, event?)

This is the event that fires when something inside the dropdown gets focus.
Usually this will be fired when the trigger gets the focus, but you can also trigger
it programmatically from other elements and use the event's target to disambiguate.

The most common use case of this hook is to automatically open the dropdown on focus.

Template

Javascript

Result

Click me

Those were the events fired by the top-level component, now let's go deep on the
events that are fired by the trigger.