Ionic-framework: bug: autofocus property has no effect on ion-input for desktop

[iqjotsangha]

Bug Report

Ionic version:


[x] 4.3.0

Current behavior:

If property autofocus is set to true for an <ion-input> element, the behavior for the <ion-input> element does not change when executing an ionic serve.

Expected behavior:

The app should focus on the <ion-input> element that has the property autofocus set to true.

Steps to reproduce:

1. Insert <ion-input autofocus="true"></ion-input> to your HTML page
2. Execute ionic serve in Ionic CLI
3. Wait for browser to pop up with app and observe behavior

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.2.1
   Ionic Framework               : @ionic/angular 4.3.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

System:

   NodeJS : v8.12.0
   npm    : 6.4.1
   OS     : Windows 10

[cjorasch]

It also can lead to problems on iOS. I was using it in a PWA and when the modal was displayed the entire screen went blank with no way to navigate back since no buttons were available. It looked like the content might have been shifted up above the top because it still appeared in the inspector. Could not figure out a solution and eventually had to stop using the attribute.

I agree that it is important to get it working on desktop because that is the standard behavior for forms in that environment.

[brandyscarney]

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

[msigwart]

I believe this issue is fixed in @ionic/angular version 4.4.0. However, I also encountered the issue that is mentioned by @cjorasch. I opened another issue #18257.

[fabiobeoni]

Hello, I can confirm the bug is still there using ionic core 4.11.x and on android too.
Thanks.

[larsblumberg]

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)})

[dreamclass]

got the same issue.

[xero88]

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>
}

[Huluvu424242]

Was this issue fixed for ion-button too?