@zestia/ember-auto-focus

HTML's autofocus attribute focuses an element on the first occurrence of the attribute. But, does nothing on subsequent renders of the same element.

This addon provides an element modifier, which auto focuses the element when it is inserted into the DOM.

Installation

ember install @zestia/ember-auto-focus

Add the following to ~/.npmrc to pull @zestia scoped packages from Github instead of NPM.

@zestia:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<YOUR_GH_TOKEN>

Demo

https://zestia.github.io/ember-auto-focus

Example

{{#if this.showField}}
  <input {{auto-focus}} />
{{/if}}

{{auto-focus}}

Arguments

selector

Optional. This positional argument allows you to auto focus a child element. Useful for occasions when you don't have access to the children.

Example

<ExampleComponent {{auto-focus '.some-child'}} />

disabled

Optional. This named argument turns off auto focusing. Note that this behaviour can now also be achieved with a conditional modifier (this wasn't always the case).

options

Optional. Any other named arguments are passed to the focus method. Some options available include preventScroll and focusVisible

Notes

This modifier has certain benefits over other implementations:

1. It waits until after render, so that in your actions you can be sure document.activeElement is as you'd expect (Example).

2. It compensates for the fact that child modifiers run their installation before parents in the DOM tree. So nesting {{auto-focus}} will work as you would expect. (Example).

3. It allows you to differentiate between an element that was focused by a user interacting with it, and an element that was focused programmatically. Through element.dataset.programmaticallyFocused. (Example)