Ionic React iOS - Prevent zoom on IonAlert input field

I have an IonAlert with a text field input prompt. On Android, the functionality works perfectly. Hit the edit button, alert pops up, and then you input the new text in the input field and and hit the confirm button. But on iOS, when the user enters the text input field inside the IonAlert, the app zooms in to the input field. Then, after hitting either Cancel or Confirm, the app zooms in even more and then locks in that position, requiring app restart to resolve. I assume this has something to do with Safari vs Chrome, but I have looked around and I have yet to find anything that works to resolve this. I have trouble believing that I am the only person to use text input on IonAlerts in this world, so I’m hoping its just something dumb that I didn’t notice I did wrong.

<IonAlert
                isOpen={showAlert}
                onDidDismiss={() => setShowAlert(false)}
                header={`Change ${type}`}
                buttons={[
                    {
                        text: 'Cancel',
                        role: 'cancel',
                    },
                    {
                        text: 'Save',
                        role: 'save',
                        handler: (e) => {
                            saveHandler(e[0]);
                        },
                    },
                ]}
                inputs={
                    [
                        {
                            name: 'input',
                            type: type === 'Name' ? 'text' : 'tel', 
                            placeholder: getPlaceHolder(),
                        },
                    ]
                }
            >
            </IonAlert>

Any ideas would be most helpful.

1 post - 1 participant

Read full topic