Auto focus on input field in Ionic Angular App, while open search popup

Question

I was getting an issue regarding auto focus in Ionic 4 and Angular 8 App

While I was opening the search modal in app, I wanted to auto focus on search box

ionicframework.com/docs/api/input#properties Check out the auto focus property — arif08
– arif08, Commented Apr 2, 2020 at 18:35

Vishal Petkar · Accepted Answer · 2020-03-29 08:16:51Z

5

For that I found the solution

I have added reference element on Input field

Ionic Code

<ion-input placeholder="Search for Products" #product_id></ion-input>

Search Modal Component Code

import { IonInput } from '@ionic/angular';
export class SearchModalComponent implements OnInit {

  @ViewChild('product_id', {static:true}) product_id:IonInput;

  ngAfterViewInit() {
    setTimeout(() => {
      this.product_id.setFocus();
    },500);
  }
}

answered Mar 29, 2020 at 8:16

Vishal Petkar

3791 gold badge6 silver badges20 bronze badges

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

1 Comment

Pierre Over a year ago

Still works with Ionic 5, thanks !

Collectives™ on Stack Overflow

Auto focus on input field in Ionic Angular App, while open search popup

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related