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 (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

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