Thanks! My point is, if there’s a directive for it, should work as expected, anything else that adding that directive is a hack… this is a long existing issue.

how do we stir it up so it gets worked on? having a framework that does not do basic things it promises is making this framework irrelevant very quickly

Just in case, it still doesn’t work with the following Ionic / Capacitor configuration (tested on Android mobile device + browser)

Ionic:

   Ionic CLI                     : 6.19.0
   Ionic Framework               : @ionic/angular 6.2.5
   @angular-devkit/build-angular : 14.2.1
   @angular-devkit/schematics    : 14.2.1
   @angular/cli                  : 14.2.1
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.1.0
   @capacitor/android : 4.1.0
   @capacitor/core    : 4.1.0

And there is nothing fancy in the view…

    <ion-item>
      <ion-label position="fixed">Name</ion-label>
      <ion-input requried [(ngModel)]="Username" autofocus="true"></ion-input>
    </ion-item>

@iva2k “to other” like what?

I can confirm this bug with Ionic 5.1.0 on Desktop/Safari, using the React IonInput component within an IonItem, IonContent, IonPage, IonApp (ordered from inside out).

Here’s the workaround that I’m using:

useIonViewDidEnter(() => {setTimeout(() => inputRef.current.setFocus(), 100)})

I gave up on Ionic, moving on to other, better things. Unsubscribe.

That’s how I do it in react. Not really a hack, just not as straightforward:

  const firstNameInputRef = use_ref<HTMLIonInputElement>(null);
  useIonViewDidEnter(() => {
    firstNameInputRef.current?.setFocus();
  });
<IonInput ref={firstNameInputRef} />

Still happens. I’m using plain JS, no framework https://jsbin.com/jadosag/1/edit?html,js,output

Thanks for the issue! I was able to reproduce this for both the native input and ion-input inside of an ion-app. Outside of that tag it is working properly. Here’s the Codepen I made to reproduce: https://codepen.io/brandyscarney/pen/axXZGV?editors=1010

Same issue here, just tried on iOS. autofocus does not work with Angular and Ionic 6.

[updating] - it seems like this did the trick… but why should i wait after view init? autofocus on the input does nothing

ngAfterViewInit(): void {
    setTimeout(() => {
      console.log('set focus');
      this.myInput.setFocus();
    }, 100);
  }

same issue on firefox linux with react

<IonItem>
  <IonInput autofocus={true}> </IonInput>
</IonItem>

Workaroud for react :

export const FormPage = () => {
    const inputRef = useRef<any>(null);

    useEffect(() => {
        setTimeout(() => inputRef.current.setFocus(), 100);
    })

    return <div>
        <h6>Name</h6>
        <IonItem>
            <IonInput ref={(ref) => inputRef.current = ref}> </IonInput>
        </IonItem>
    </div>
}