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.

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.

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.

Cruel, isn't it?

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