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:

Template

Javascript

Result

Bookface

4

Let's break this down.

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

Then onMouseEnter={{action "open"}} and onMouseLeave={{action "closeLater"}}
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 trayectory 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.