Ember Outside Click
Outside click component for Ember. Clean and simple.
Install
$ ember install ember-outside-click
Use
Block form
{{#outside-click onOutsideClick=(action 'hide')}} <a href="#" onclick={{action 'toggle'}}>Dropdown</a> {{#if open}} <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> {{/if}}{{/outside-click}}
Subclass
Excluding classes
To exclude classes from the outside click behaviour, add the excludedClasses
property to the component.
{{#outside-click excludedClasses=(array 'excluded-class' 'special-toolbar')}} ...{{/outside-click}}
See the demo code to exclude classes via subclassing.
Test
As explained by @runspired, jQuery events are somewhat inconsistent. So ember-outside-click uses native DOM methods instead.
If you find yourself having trouble with jQuery's trigger
, you should make
and call a triggerMouseEvent
test helper.
// tests/helpers/trigger-mouse-event.js { const event = document event node} // tests/integration/components/drop-down/component-test.js
GitHub @nucleartide · Twitter @nucleartide