Autofocus on an input field on button click in angular 9

Question

I have add buttons at two separate places inside my component. On click of the button, the input field shows up. I have tried multiple ways to achieve this as follows:

Used autofocus attribute on the input field - as i have two buttons on the screen, autofocus does not seem to work.

Used .focus() method -

HTML File

<button (click) = "addUser()">Add User</button>

<input *ngIf="showInputField" #userName />

TS File

@ViewChild('userName') userName:ElementRef;
addUser() { this.showInputField=true; this.userName.nativeElement.focus(); }

In second case, i got the error "cannot read the property nativeElement of undefined", which is because the HTML loads after the execution of method completes.

Arunkumar Ramasamy · Accepted Answer · 2020-11-17 10:07:04Z

2

You can implement AfterViewChecked in your component and then just remove that this.userName.nativeElement.focus() in addUser() method.

addUser() { 
  this.showInputField = true; 
}

ngAfterViewChecked(): void {
  if (this.showInputField) {
    this.userName.nativeElement.focus();
  }
}

Reference: https://stackblitz.com/edit/angular-ycuvth?file=src/app/autocomplete-auto-active-first-option-example.ts

answered Nov 17, 2020 at 10:07

Arunkumar Ramasamy

7914 silver badges9 bronze badges

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

3 Comments

kirti Over a year ago

Thanks for quick reply, the solution seems to work, but i am getting an error in the console after using this lifecycle hook "Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'mat-form-field-should-float': 'false'. Current value: 'true'."

Arunkumar Ramasamy Over a year ago

did you try same what I provided in the above stackblitz url?

kirti Over a year ago

yes, i have used exactly the same code, but using this link, i got rid of the above error, post which i am getting ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'mat-focused': 'false'. Current value: 'true'.

Emilien · Accepted Answer · 2020-11-17 09:39:50Z

0

It's probably not the best solution but you can use setTimeout() to wait for the boolean value to change.

addUser() {
  this.showInputField = true;
  setTimeout(() => this.userName.nativeElement.focus());
}

Seen here : https://stackoverflow.com/a/50014475/6444705

answered Nov 17, 2020 at 9:39

Emilien

2,7534 gold badges17 silver badges29 bronze badges

Collectives™ on Stack Overflow

Autofocus on an input field on button click in angular 9

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related