autofocus issue

[dkdrk]

Autofocus doesn't seem to work due to liquid-fire. Even after adding the following snippet, I couldn't achieve autofocus.

TextSupport.reopen({
  didInsertElement() {
    this._super(...arguments);
    if (this.get('autofocus')) {
      run.scheduleOnce('afterRender', () => {
        this.$().focus();
      });
    }
  }
}); 

[CmdrChaos]

I am also seeing this behavior. Autofocus behavior works fine outside of a liquid-outlet, but not within one.

[HerveSeger]

Hi.

I had the same issue so I have customized the move-over.js and fade.js transitions that I was using by adding the scrolling and animation at the end of the promise. It works fine.

app/transitions/move-over.js

...
return firstStep.then(() => {
		const bigger = biggestSize(this, measure);
		oldParams[property] = `${bigger * direction}px`;
		newParams[property] = ['0px', `${-1 * bigger * direction}px`];

		return Promise.all([
			animate(this.oldElement, oldParams, opts),
			animate(this.newElement, newParams, opts, 'moving-in').then(() => {
				$('html,body').animate({
					scrollTop: 0
				}, 'slow');
				$(this.newElement).find('[autofocus]').focus();
			})
		]);
	});

app/transitions/fade.js

...
return firstStep.then(() => {
	return animate(this.newElement, {
			opacity: [(opts.maxOpacity || 1), 0]
		}, opts, 'fade-in')
			.then(() => {
				$('html,body').animate({
					scrollTop: 0
				}, 'slow');
				$(this.newElement).find('[autofocus]').focus();
			});
	});