Ionic v4 - how do I autofocus on a Input?

Question

I have a view with an input <ion-input #codigobarras></ion-input>

How can I auto focus on this input?

What have I tried

@ViewChild('codigobarras') input_codigobarras: Input;

...

ionViewDidEnter() {
    this.input_codigobarras.focus(); // didn't work = temp2.focus is not a function
    this.input_codigobarras.focus.emit(); // didn't work = do nothing, just returns undefined
    this.input_codigobarras.getElementRef().nativeElement.focus() // didn't work = do nothing, just returns undefined
    this.input_codigobarras.setFocus(); // didn't work = do nothing, just returns undefined
}

<ion-input [autofocus]></ion-input> <!-- Didn't work -->

ppichier · Accepted Answer · 2019-02-27T21:47:22.877

16

This should work

<ion-input autofocus="true"></ion-input>

edited Feb 27 '19 at 21:47

answered Feb 27 '19 at 21:29

ppichier

1,108
1
16
21

1

That worked, but after the pages loads I have loading on screen while I list some itens, this loading blurs the input, do you know how can I focus again after this loading? – SpaceDogCS Feb 28 '19 at 12:26
Maybe you can try my answer 2 – ppichier Mar 01 '19 at 07:57

score 14 · Answer 2 · answered Feb 19 '20 at 22:55

A more generic solution to do this when and where you want could be:

<ion-input ... #inputId></ion-input>

So with a ViewChild in your controller you can easily set the focus on:

@ViewChild('inputId', {static: false}) ionInput: { setFocus: () => void; };
...
setFocusOnInput() {
   this.ionInput.setFocus();
}

AymericFi · Answer 3 · 2021-09-07T12:12:33.450

I had an conflict of focus regarding with ion-input inside a ion-modal. In fact, after using a timeout, i realized that my ion-input was focus and unfocused instantly.

setTimeout(() => this.ionInput.setFocus(), 100);

So, I console log the activeElement (the one that is focused) with:

document.activeElement

And the console output ion-modal.

Hence, I had to wait the ion-modal to be "fully loaded" to use the setFocus with as mentioned above.

score 4 · Answer 4 · answered Mar 01 '19 at 07:57

After the loading of your items you can try to trigger your ElementRef with ngOnChanges()

 @ViewChild('test') test: ElementRef;

 ngOnChanges(changes: SimpleChanges){
     if(changes.items) {
     this.test.nativeElement.firstChild['autofocus'] = 'true';
   }
}

and your html

<div #test>
  <ion-input ></ion-input>
</div>

score 0 · Answer 5 · answered Apr 23 '20 at 19:28

Ionic 4/5

HTML

<ion-input ... #inputId></ion-input>

TS

export class SomePage {
....
@ViewChild('inputId', {static: false}) inputEl: IonInput;
....

focusOnElement() {
    this.tipDesc.setFocus();
}

Ionic 3

@ViewChild('inputId') inputEl: TextInput;

Call focusOnElement() when you want to focust on input

score 0 · Answer 6 · answered Feb 16 '23 at 10:07

0

Using Ionic 6 : 


  HTML :
    <ion-input type="text" #autofocus>
    
    TS File : 
    import { Component, ViewChild } from '@angular/core';
    
    @ViewChild('autofocus', { static: false }) inputBox!: IonInput;
    
    ionViewWillEnter() {
        setTimeout(() => this.inputBox.setFocus(), 300);
      }

answered Feb 16 '23 at 10:07

Sanchay Kothari

21
1
5

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 23 '23 at 02:05

score 0 · Answer 7 · answered Apr 19 '23 at 10:00

0

For those whom are facing the same problem in Ionic with React.

I tried both inputRef.current.focus() and set autofocus=true without success.

inputRef.current.setFocus() instead works.

answered Apr 19 '23 at 10:00

Andrea Arseni

1

score 0 · Answer 8 · answered Apr 19 '23 at 12:02

HTML CODE:

<ion-input #inputId></ion-input>

TS CODE:

import { Component, OnInit, ViewChild } from '@angular/core';
import {  IonInput } from '@ionic/angular';
export class LoginPage implements OnInit {

  @ViewChild('inputId', {  static: false })  inputElement: IonInput;

  ngAfterViewInit() {
      setTimeout(() => {
         this.inputElement.setFocus();
    }, 400);
  }`

Ionic v4 - how do I autofocus on a Input?

What have I tried

8 Answers8

Linked