The trigger is the component in charge of opening and closing the dropdown (although it also closes
if you click outside it). By default the event that to which the trigger reacts is the
event, not the `click` event.
You can change that passing the
eventType="click" to the trigger. Check below both
approaches. The different is subtle.
This does not affect to the behavior of the dropdown on touch devices. On mobile or tablets the
dropdown automatically depends on the
As with the previous component, the events fired are named after the DOM events
that trigger them, but camelcased.
accepts a lot of actions whose name is
mousedown events will fire the
keydown events will fire
onKeyDown and so on.
Let's see some examples.
One real world situation where I found this to be necessary, is when you want to open the dropdown with a key that usually does not open it, like by example the arrow keys.
As with any other event, returning
false will prevent the default behavior,
so you can use this action to prevent the space, enter and esc
keys from doing what they do by default.
click event is the one that usually opens the dropdown,
but you can pass your own function.
Good examples of this are preventing the component from opening with the mouse and/or react in some way to those attempts.
Exactly identical to
onMouseDown but for touch screens. I'm not even going
to create another example.
onMouseEnter / onMouseLeave(dropdown, event)
I use this event to open the dropdown when you hover it and close it when you leave but you can really use it a lot more.
By example, imagine that a dropdown is disabled and you want to highlight some other element in the form that the user must enable first.
I've used this two events in conjuntion to style a parent element while some of the
components inside it have the focus, achieving a poor mans' version of the upcoming CSS
:focus-within pseudo selector.
Focus alternatively the input and the button next to it
This is the most involved example yet. Both the text input and the trigger are focusable on their own, but by tracking when they get and loose the focus we simulate that the entire input-group is focused, which would be impossible just just CSS today.
Right now this behaviour cannot be attaine
onFocus/onBlur, but for the
Beware that those event are not supported in firefox at the time of this writing.
This are all the events the trigger can handle. They are a bit low level but the goal is giving you as much control as posible so you can build a wrapper that works how you want it to work that hides this low-level events.