bug: focus trapping activates on toast if non-toast presented first

[Pictocube]

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 ([email protected])
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

[liamdebeasi]

Thanks for the issue. Can you please reproduce this in an Ionic starter app and provide a link to the GitHub repo?

[Pictocube]

Hi @liamdebeasi, i tried to reproduce the issue from a blank Ionic starter app. Sadly didn't to succed to reproduce it for the moment.
I tried with :

• adding all my dependancies in the package.json and install them
• recreate the same project / page structure
• adding the same directives and scss properties

There might be a strange behaviour due to the complexity of my app.
Do you have any suggestion to go deeper in the analysis ?(like configurations files who could be interfering for exemple)

Thank you for your time !

[liamdebeasi]

I recommend isolating the issue in your application first. Remove pieces of code, and check to see if the issue still reproduces every time you do that.

[papagei-ma]

@liamdebeasi @Pictocube Actually same issue here. For 2 weeks, I have been trying to isolate the issue, but no luck.
I can though give you some weird infos. (WEB) I log into the app, go to the page with the input field and the toast, display the toast, and typing is prevented until toast disappears. Weirdly, I do a hard refresh (ctrl + f5) in the same page, show toast and typing is allowed while toast shown :( . Did you see anything like that before :D?

[tonymccallie]

I am having the same issue, but only on Safari or Firefox. When a toast message is present, I cannot focus my form fields. I cannot reproduce this in a clean app.

We did upgrade this app from Ionic 5 to 6 and upgraded Angular if that helps.

[tonymccallie]

You can see the bug in action here: https://hq.dev.lexgo.live/login in Safari or Firefox. Works fine in Chrome

[papagei-ma]

@tonymccallie @liamdebeasi what do you think about
` const toast = await this.toastController.create({
message,
});

toast.removeAttribute('tabindex');

await toast.present();`
it does the trick for me. Any thoughts?

[miljann995]

I managed to reproduce this issue by showing ion-loading, hiding it, and then showing ion-toast. After all these steps, ion-input cannot be focused until ion-toast is 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/angular is 6.0.8.

[papagei-ma]

@miljann995 can you try removing 'tabindex'?

[miljann995]

@papagei-ma Yes, removing tabindex from ion-toast solves the issue. Without it, the issue is only reproducible if ion-toast is used in combination with ion-loading. Standalone, both components work fine and do not prevent ion-input from being focused.

[papagei-ma]

@miljann995 you can see my comment before, I see. You mean, due to showing a loader while routing to the page in my case, that was reproducible. Yet when I refresh the page, which seems not show a loader, the focus was not possible :). Thanks, I think I can sleep now :D.

[tonymccallie]

@papagei-ma thank you!

toast.removeAttribute('tabindex');

Worked for me.

[liamdebeasi]

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 because ion-loading is presented first the focus trapping is enabled.

[papagei-ma]

@liamdebeasi Do you think removing tabindex is ok?

[liamdebeasi]

Removing tabindex means that users will be able to tab to the ion-toast, so I do not recommend doing that.

[papagei-ma]

@liamdebeasi oh, thank you.

[liamdebeasi]

Can everyone try the following dev build and let me know if it resolves the issue?

6.0.9-dev.1645200028.2062b87

This applies to all Angular, React, Vue, and Core packages. Example:

npm install @ionic/[email protected]

[tonymccallie]

@liamdebeasi That version did resolve the issue for me. It works without having to remove tabindex.

[miljann995]

@liamdebeasi Bug doesn't occur anymore with the 6.0.9-dev.1645200028.2062b87 version in my demo application.

[Pictocube]

@liamdebeasi same for me, the issue seems to be resolved with your fix 👏 🚀
Thank you !

[liamdebeasi]

Thanks for the issue. This has been resolved via #24816, and a fix will be available in an upcoming release of Ionic Framework.

[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.