ionic-framework: bug: focus trapping activates on toast if non-toast presented first
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
- v4.x
- v5.x
- v6.x
Current Behavior
Since Ionic-6 when a ion-toast is displayed, it steal the focus from the ion-input who was initially focused.
After the toast is dismissed, my ion-input still owns the focus (the CSS property “has-focus” is correctly triggered), but the caret inside the input is missing.
<ion-input _ngcontent-upn-c145="" hidekeyboard="" type="text" required="" ng-reflect-type="text" ng-reflect-required="" ng-reflect-placeholder="Emplacement ?" class="sc-ion-input-md-h sc-ion-input-md-s md hydrated has-focus"> <input class="native-input sc-ion-input-md" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-2" placeholder="Emplacement ?" required="" spellcheck="false" type="text"> </ion-input>
Then I’m unable to whrite inside my input without re-select it.
Expected Behavior
I’m exepected to be able to whrite inside my ion-input while the ion-toast is displayed and keeping the focus after the toast is dissmissed.
Steps to Reproduce
Create a page with a single input and click on it to focus it.
With a timeout for exemple create a simple ion-toast and present it.
const toast = await this.toastController.create({ message: 'This is a test', duration: 2000 });
toast.present();
Try to whrite something while the ion-toast is displayed (or after it’s dissmissed) without clicking on the input.
Code Reproduction URL
No response
Ionic Info
Ionic: Ionic CLI : 6.18.1 Ionic Framework : @ionic/angular 6.0.5 @angular-devkit/build-angular : 13.2.2 @angular-devkit/schematics : 13.2.2 @angular/cli : 13.2.2 @ionic/angular-toolkit : 6.0.0 Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : none Cordova Plugins : no whitelisted plugins
Utility: cordova-res : not installed globally native-run : 1.5.0 System: Android SDK Tools : 26.1.1 NodeJS : v16.13.2 npm : 8.2.0 OS : Windows 10
Additional Information
Apparently, this a bug due to tabindex valued to -1 in the ion-toast
More details here : https://forum.ionicframework.com/t/ionic-version-6-angular-toast-now-holds-focus-preventing-inputs-from-being-used/218430/5
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 22 (6 by maintainers)
Commits related to this issue
- fix(toast): toast is now correctly excluded from focus trapping (#24816) resolves #24733 — committed to ionic-team/ionic-framework by liamdebeasi 2 years ago
Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/24816, and a fix will be available in an upcoming release of Ionic Framework.
I managed to reproduce this issue by showing
ion-loading, hiding it, and then showingion-toast. After all these steps,ion-inputcannot be focused untilion-toastis dismissed. Here’s the example application with a minimal amount of code: https://github.com/miljann995/ion-input-focus-issue A version of the@ionic/angularis6.0.8.@liamdebeasi same for me, the issue seems to be resolved with your fix 👏 🚀 Thank you !
@liamdebeasi Bug doesn’t occur anymore with the
6.0.9-dev.1645200028.2062b87version in my demo application.@liamdebeasi That version did resolve the issue for me. It works without having to remove tabindex.
Removing tabindex means that users will be able to tab to the
ion-toast, so I do not recommend doing that.Thanks, I can reproduce this. We have a focus trapping utility that prevents focus from going outside of elements such as modals and alerts for accessibility purposes. Focus trapping should not happen on
ion-toast, but becauseion-loadingis presented first the focus trapping is enabled.@papagei-ma thank you!
toast.removeAttribute(‘tabindex’);
Worked for me.