Trigger events

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 mouseDown event, not the `click` event.

You can change that passing the eventType="click" to the trigger. Check below both approaches. The different is subtle.

Mousedown (default)
Click

This does not affect to the behavior of the dropdown on touch devices. On mobile or tablets the dropdown automatically depends on the "touchend" event.

Event handlers

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 on<EventName>>.

Therefore, mousedown events will fire the onMouseDown, keydown events will fire onKeyDown and so on.

Let's see some examples.

onKeyDown(dropdown, event)

One real world situation where I found this to be neccessary, is when you want to open the dropdown with a key that usually does not open it, like by example the arrow keys.


Click me

As with any other event, returning false will prevent the default behaviour, so you can use this action to prevent the space, enter and esc keys from doing what they do by default.

onMouseDown(dropdown, event)

The mousedown 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.


Do not click me

onTouchEnd(dropdown, event)

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.


Can you open me?

onFocus/onBlur(dropdown, event)

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

onFocusIn/onFocusOut(dropdown, event)

Similar to onFocus/onBlur, but for the focusin/focusout events.

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.