bug: unintended re-focus to input after selecting clear input button with iOS VoiceOver

[nagashimam]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x, v8.x (Beta)

Current Behavior

When using iOS VoiceOver to focus on an ion-input with a clear input button, and swiping right to select the next item, the focus unexpectedly returns to the input immediately after the clear input button gains focus. Consequently, it becomes impossible to move VoiceOver's focus away from the input, effectively preventing interaction with other parts of the app.

I have attached a screen recording to demonstrate this behavior.

Expected Behavior

The VoiceOver focus should remain on the clear input button and not revert back to the input field after it has been selected.

Steps to Reproduce

• Open the reproduction page on an iPhone.
• Use the Safari Developer Tools and execute the following commands to monitor focusin events:

document.querySelector("body > ion-app > ion-content > ion-list > ion-item:nth-child(1) > ion-input > label > div.native-wrapper.sc-ion-input-ios.sc-ion-input-ios-s > button").addEventListener("focusin", () => {console.log("focusin to button")});
document.querySelector("body > ion-app > ion-content > ion-list > ion-item:nth-child(1) > ion-input").addEventListener("focusin", () => {console.log("focusin to ion-input")});

• Enable VoiceOver, enter some text in the first input field, and swipe right.
  • Observe that the focus unexpectedly returns to the input immediately after the clear input button gains focus.
  • Notice that the ion-input's focusin event is triggered after the button’s event.
• Remove the event listener for the ion-input (as demonstrated in the uploaded screen recording) and repeat the previous step.
  • The problematic behavior no longer occurs.

Code Reproduction URL

https://stackblitz.com/edit/usdwwp?file=index.html

Ionic Info

I use online StackBlitz to reproduce the issue using @ionic/[email protected], but just in case information about my local environment is needed:

Ionic:
                                                                                                                                                                                                                  
   Ionic CLI                     : 7.2.0 (/Users/mzb0005/.anyenv/envs/nodenv/versions/20.11.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.8.0
   @angular-devkit/build-angular : 17.3.0
   @angular-devkit/schematics    : 17.3.0
   @angular/cli                  : 17.3.0
   @ionic/angular-toolkit        : 11.0.1
                                                                                                                                                                                                                  
Cordova:
                                                                                                                                                                                                                  
   Cordova CLI       : 12.0.0 ([email protected])
   Cordova Platforms : android 12.0.1, ios 7.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, (and 43 other plugins)
                                                                                                                                                                                                                  
Utility:
                                                                                                                                                                                                                  
   cordova-res : not installed globally
   native-run  : 2.0.1
                                                                                                                                                                                                                  
System:
                                                                                                                                                                                                                  
   ios-deploy : 1.12.2
   ios-sim    : ios-sim/9.0.0 darwin-arm64 node-v20.11.1
   NodeJS     : v20.11.1 (/Users/mzb0005/.anyenv/envs/nodenv/versions/20.11.1/bin/node)
   npm        : 10.2.4
   OS         : macOS Unknown
   Xcode      : Xcode 15.2 Build version 15C500b

Additional Information

Cause of the Behavior

The issue arises because iOS VoiceOver triggers a focusin event when selecting an element. This event bubbles up, causing the focusin event of the ion-input to be fired subsequent to the clear input button's focusin event. Consequently, the input receives focus again as part of the callback function of the ion-input, which leads to the focus unexpectedly returning.

Suggested Fix

The current implementation compares document.activeElement with the element to be focused. To address the issue, it is advisable to also check the class of document.activeElement. Specifically, if the classList of the element contains input-clear-icon, which identifies the clear input button, then focus should not be shifted away from it. This adjustment will ensure that focus remains on the clear input button as intended.

[liamdebeasi]

Thanks for the report. Here is a dev build with a proposed fix if you are interested in testing: 8.0.1-dev.11713535425.1a4afba3

[nagashimam]

@liamdebeasi
Thanks for the response and yes, stop propagation is much simpler approach! The problem is fixed with the version. StackBlitz has some issue installing dev builds as you said in another issue, but in my local project it works as intended.

[nagashimam]

@liamdebeasi
Also, I understand that updates are primarily targeted at the latest versions, but I was wondering if there might be any possibility of backporting this fix to 7.x.x as well? Our team, along with quite a few others I believe, isn't quite ready to make the jump to 8.x.x just yet, while this fix is essential for screen reader users(especially those who are blind).

Thanks for considering this and for all the hard work you put into Ionic!

[liamdebeasi]

Thanks for the issue. This has been resolved via #29366, and a fix will be available in an upcoming release of Ionic Framework. We also plan to backport this to Ionic v7.

[nagashimam]

Thank you, it helps a lot!

[nagashimam]

@liamdebeasi
I failed to consider we have two render functions for ion-input in v7.8.6, renderInput and renderLegacyInput. We have put the fix inside renderInput, but not inside renderLegacyInput. Can I make a PR to add the same focusin event to this line?

[liamdebeasi]

Hey there! I don't work for Ionic anymore, but you could bring it up with the team. I will note that the legacy input has been deprecated for over a year in v7, so I'm not sure what the team's appetite for backporting this fix to the legacy input will be. cc @brandyscarney

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.