Prevent ion-input to take focus within ion-item when its value got changed (Safari issue only)

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>

What’s a good way to prevent such behavior?

I copied your snippet and pasted it into Stackblitz. I don’t see the input box receiving the focus when I click the button.

Thanks for your demo project, it actually does reproduce the issue, but only manifests on Safari, macOS or iOS.

I’ve also provided a full Ionic app here: and created a GitHub issue as well: