ionic-framework: bug: interactive items in ion-item unexpectedly being focused with delegatesFocus

Bug Report

Ionic version: [ ] 4.x [x] 5.x

Current behavior: On Safari in macOS or iOS, IonInput (ion-input) steals focus when its value gets changed programmatically.

Expected behavior:

ion-input doesn’t take the focus.

Steps to reproduce: 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.

Apart from the fact that this might be unwanted and thus should be controllable by the programmer, 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. However in this case, the input surprisingly “steals” the focus.

Related code:

const Test = () => {
  const [value, setValue] = useState("")
  return <IonItem>
    <IonInput value={value} onIonChange={e => setValue(e.detail.value)} />
    <IonButton onClick={() => setValue("foo")}>foo</IonButton>
  </IonItem>
}

Full demo project available here: https://github.com/larsblumberg/ion-input-focus-stealing-on-safari

Other information:

Effect only observable when input is contained within an ion-item and only in Safari on macOS and iOS.

Ionic info:

Ionic:
   Ionic CLI       : 6.11.1 (/Users/lars/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.2.2

Capacitor:
   Capacitor CLI   : 2.0.2
   @capacitor/core : 2.2.0

Utility:
   cordova-res : not installed
   native-run  : not installed

System:
   NodeJS : v14.4.0 (/usr/local/Cellar/node/14.4.0/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 19 (5 by maintainers)

Links to this issue

[Bug] Tapping on images will instantly scroll down - Lemmy.World

Commits related to this issue

refactor(item): do not automatically delegate focus (#29091) resolves #21982 BREAKING CHANGE: - Item no longer automatically delegates focus to the first focusable element. While most developer... — committed to ionic-team/ionic-framework by liamdebeasi 4 months ago

Most upvoted comments

To force ion-input to not steal focus, Set ion-button with attribute tabIndex=“1”, Set ion-input with attribute tabIndex=“2”

<IonItem> <IonInput tabIndex={2} value={value} onIonChange={e => setValue(e.detail.value)} /> <IonButton tabIndex={1} onClick={() => setValue("foo")}>foo</IonButton> </IonItem>

As a side effect, the ion-button will take on a border when focused. Add to css to remove the border.

ion-button:focus{ outline: none; }

xclusive36 on Nov 27, 2020

Same issue ion Mac / Safari. Due to following structure, clicking anywhere in the content area would snap focus to the input. Also meant user couldn’t select and copy text in the content area (and we know that users hate being restricted from using your app in ways you didn’t intend…)

<ion-reorder-group>
  <ion-item>
    <ion-card>
      <ion-input>
      <content>. <!-- Clicking anywhere in here (including buttons) snaps focus to ion-input above -->

Solved this by adding tabindex=“0” to the container card:

<ion-card tabindex="0">

The only difference for the user is that keyboard tabs now include the whole card on the way to actual inputs. Can’t foresee any other issues but happy to be corrected if there are.

grantmk on Aug 29, 2023

Running Ionic Angular 5.4.16 and seeing this issue with ion-inputs. It’s within an ion-reorder-group, so there’s no good way to avoid using ion-items.

Edit: I ended up getting around this by adding tabIndex to the elements that should keep focus.

ghwilley on Jan 31, 2022

I’ve upgrade this issue’s demo app to @ionic/react v. 5.3.3 as its release document states that the other, related issue https://github.com/ionic-team/ionic-framework/issues/22037 (linked by @liamdebeasi) addresses the same underlying bug. However, the behavior I’m describing here isn’t fixed and it’s still an issue (bug).

larsblumberg on Sep 25, 2020