Content events

Like the trigger, the dropdown accepts function to bind a few handy events.

onFocusIn/onFocusOut(dropdown, event)

Those events are just identical to the ones in the trigger.

onMouseEnter / onMouseLeave(dropdown, event)

Used in conjunction with the same events in the trigger it quite easy to make a dropdown that opens when you hover the trigger and closes leave it, but stays open if you move from the trigger to the content.

You can even delay the closing a bit to allow the users to briefly pass outside the boundaries of the dropdown without closing it. Think the navbar of your favourite social network:

Let's break this down.

First we <dd.Trigger {{on "mousedown" this.prevent\\}}> neglect mouse input: Open/close both by click and hover will trip our users.

Then {{on "mouseenter" (fn this.open dd)}} and {{on "mouseleave" (fn this.closeLater dd)}} open a close the dropdown, but we we leave we don't close immediately. Instead we delay the close a few milliseconds as a grace period, allowing the user to transition from the trigger to the content even if the trajectory of the mouse is not perfect.

If before that grace period they enter again the boundaries of the component, we cancel the scheduled close. This would be much cleaner using ember-concurrency tasks.

In the following chapters we will learn how to customize the dropdown behaviour with all the different options.