bug: unintended re-focus to input after selecting clear input button with iOS VoiceOver #29358
Description
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
focusinevents:
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'sfocusinevent is triggered after thebutton’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/core@8.0.0, 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 (cordova-lib@12.0.1)
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.