The following code snippet reproduces the effect that when an ion-input’s value got changed progammatically, here via a button click, then the ion-input will receive focus automatically as an effect. This effect is only observable within an ion-item container and on Safari in macOS and iOS. How can this effect be prevented?
Apart from the fact that this is unwanted, it also comes with the side effect of the virtual keyboard popping up since the input receives focus. That’s only acceptable if the user sets focus explicitely on the input.
const Test = () => {
const [value, setValue] = useState("")
return <IonItem>
<IonInput value={value} onIonChange={e => setValue(e.detail.value)} />
<IonButton onClick={() => setValue("foo")}>foo</IonButton>
</IonItem>
}
What’s a good way to prevent such behavior?