bug: ion-toast prevents focusing ion-input while visible

[papagei-ma]

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

When a toast is being displayed the input elements (type='text', because checkboxes, selects and buttons work properly) are not working. I checked that they are not disabled, but somehow the click event is not captured. The element keep working programmatically properly, as I set a timer and changed the value of the bound variable every second, and the value gets emitted to the element. But no user interactivity is available

Expected Behavior

One can type in the input element

Steps to Reproduce

1. Have an ion-input or an html input type='text' on your page.
2. Create a toast for a reasonable amount of time maybe 5 seconds, through
   const toast = await this.toastController.create({ message: 'Your settings have been saved.', duration: 2000 }); toast.present();
3. While the toast is showing, try to type anything in the input element.

Code Reproduction URL

https://github.com/papagei-ma/ion-toast-v6

Ionic Info

Ionic:

Ionic CLI : 6.16.3 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.2
@angular-devkit/build-angular : 13.0.4
@angular-devkit/schematics : 13.0.4
@angular/cli : 13.0.4
@ionic/angular-toolkit : 5.0.3

Additional Information

Checked on Chrome and safari, bug appears on both.

[sean-perkins]

Thanks for reporting this!

On an initial look, it looks like the keyboard focus trap we use for overlays is being applied to toasts (when it shouldn't).

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