Ember.js: Autofocus on route transition

[ascot21]

Autofocus on an input doesn't appear to be working on a transition into a new route. It works when refreshing the browser but if you transition to a new route the input won't focus.

Here's a gist of example code that shows the issue with only one input on each route: https://gist.github.com/ascot21/79a028d418b92d1b0b7c

[ballPointPenguin]

I have a similar issue. A search field that uses autofocus is in a parent route and whenever the child route gets re-rendered (due to automatic search results), the search field loses focus to the child template even though the child template does not have any autofocus fields.

[topaxi]

I had a similar issue and fixed it with a little component for now:

import TextField from 'ember-components/text-field'
import on        from 'ember-evented/on'

/**
 * Text input which has autofocus
 *
 * @class FocusInput
 * @public
 */
export default TextField.extend({

  /**
   * Focus element after inserted into DOM
   *
   * @return {void}
   */
  becomeFocused: on('didInsertElement', function() {
    this.$().focus()
  })
})

[ascot21]

@topaxi that's what I've done as well now. Shouldn't have to do that however.

[pixelhandler]

@ascot21 can you post the link to the twiddle from your gist?

[ascot21]

@pixelhandler https://ember-twiddle.com/79a028d418b92d1b0b7c

feel free to modify if need be

[stefanpenner]

Unfortunately this isn't something in embers control (at least i do not believe so) how and when autofocus works is a browser detail :(. Doing so automatically in ember, would likely result in an even poorer UX. The best solution is to tune this manually, similarly to how it has been suggested above.

[seanjohnson08]

@stefanpenner - any chance this issue could be reopened and readdressed? If the browser's default behavior is to focus an input autofocus on page load, why shouldn't Ember's default behavior be to do the same on route transition? I understand the accessibility concerns, but I feel like this could have a solution that addresses all concerns. The "workaround" seems dirty.

[jelhan]

I've done some testing and it really depends on browser: In Chromium (51.x), IE11 and Edge autofocus works first time only but doesn't matter if there were any transition before. In Firefox (48) autofocus only works for first page. Didn't tested Safari and mobile browsers.

[nadnoslen]

It would be nice if EmberJs could somehow fix this, I don't quite understand why the TextField and TextArea component do not properly respect autofocus; I can't seem to figure it out in any browser and have had to work around this since 2014.

As @topaxi mentioned many years ago, create your own component. Better yet, create one named the same as Ember's <Input> component (using Ember-3.17 in this example):

$ ember g component-class input

And then in the app/components/input.js that was created:

import TextField from '@ember/component/text-field';

export default class InputComponent extends TextField {
  didInsertElement() {
    super.didInsertElement(...arguments);  // just good practice
    if (this.element.getAttributeNames().includes('autofocus')) {
      // `autofocus` is among the attributes belonging to the `input` element
      // manually trigger `focus()`; not ideal but at least this works between transitions
      this.element.focus();
    }
  }
}

Do the same for <TextArea> except you extend TextArea from @ember/component/text-area.

Hope that helps.

[jelhan]

@nadnoslen I would recommend using an element modifier in Ember Octane for autofocus. It decouples the autofocus feature from a specific component. It could be applied to any component or HTML element. You could use this existing addon if you don't want to implement one yourself: https://github.com/qonto/ember-autofocus-modifier