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.
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
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
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
Example: Create a dropdown with some checkboxes inside, and don't allow it to close until one checkbox is selected.
Cruel, isn't it?
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.
Those were the events fired by the top-level component, now let's go deep on the events that are fired by the trigger.