Autofocus attribute does not work properly on <input> with Angular [duplicate]

Question

I'm facing impediments with an HTML <input /> with autofocus attribute using Angular.
I made a component InputComponent that has an @Input autoFocus.
My goal is to reflect this attribute on the tag <input /> in order to focus it when the page is loaded / refreshed.
The following syntaxes do work with raw code:

    <input autofocus />
    <input autofocus="" />
    <input autofocus="true" />
    <input autofocus="'true'" />
    <input autofocus="autofocus" />
    <input autofocus="'autofocus'" />

But I'm not able to make it work using the @Input autoFocus valued as true, 'true' or 'autofocus', trying the following syntaxes:

    <input [autofocus]="autoFocus" />
    <input [attr.autofocus]="autoFocus" />
    <input autofocus="{{ autoFocus }}" />

I even tested these syntaxes with raw values without anymore success:

    <input [autofocus]="'autofocus'" />
    <input [autofocus]="'true'" />
    <input [autofocus]="true" />
    <input [attr.autofocus]="'autofocus'" />
    <input [attr.autofocus]="'true'" />
    <input [attr.autofocus]="true" />
    <input autofocus="{{ 'autofocus' }}" />
    <input autofocus="{{ 'true' }}" />
    <input autofocus="{{ true }}" />

If I inspect the HTML DOM with chrome debugger, everything seems fine, final code is always <input autofocus="true" />. But the <input /> is still not focused when the page is loaded / refreshed !
It feels like interpreted code is done too late for the autofocus to be taken in account.
I wonder if someone else faced the same issue and found a solution ?
I guess I would use a directive like this exemple if I do not find a better solution.

Jayson Sarino · Accepted Answer · 2025-06-26 13:10:10Z

1

Use a Directive with ElementRef and AfterViewInit

A custom directive is the most reliable way to ensure autofocus behavior in Angular.

Example code:

// auto-focus.directive.ts
import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[appAutoFocus]'
})
export class AutoFocusDirective implements AfterViewInit {
  @Input('appAutoFocus') autoFocus = false;

  constructor(private el: ElementRef<HTMLInputElement>) {}

  ngAfterViewInit() {
    if (this.autoFocus) {
      // Focus after view initialization
      this.el.nativeElement.focus();
    }
  }
}

Usage in Your Component Template:

<input type="text" [appAutoFocus]="autoFocus" />

Or if you want it always to autofocus:

<input type="text" appAutoFocus="true" />

ngAfterViewInit() ensures that the DOM is fully initialized before trying to focus the element.

The browser’s native autofocus attribute only works on initial HTML render, not after Angular initializes the view.

answered Jun 26 at 13:10

Jayson Sarino

11 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eliseo Jun 26 at 13:59

Jayson, if you always want to "focus" you needn't use an @Input. You can:ngAfetrViewInit(){this.el.nativeElement.focus();} and use like <input appAutoFocus>. You can also use as "selector" [autofocus] and work "like an html page"

Collectives™ on Stack Overflow

Autofocus attribute does not work properly on <input> with Angular [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related