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.