Ionic-framework: bug: Input not able to focus with opened Modal

[EinfachHans]

Bug Report

Ionic version:


[ ] 4.x
[x] 5.x

Current behavior:

I just saw in our project that the Searchbar in a Drawer Pane isn't clickable anymore, It was before, so i don't know what causes the Change, maybe a side effective from a newer Version?

Expected behavior:

The Searchbar should work

Related code:

I created a Repo where you can reproduce the Bug (also with ionic serve): https://github.com/HansKrywaa/pane-searchbar-problem

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.1000.4
   @angular-devkit/schematics    : 10.0.4
   @angular/cli                  : 10.0.4
   @ionic/angular-toolkit        : 2.3.0

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   NodeJS : v12.16.1 (/usr/local/bin/node)
   npm    : 6.14.6
   OS     : macOS Catalina

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[EinfachHans]

Looks like i press Submit to fast 😃 I already created the Repo: https://github.com/HansKrywaa/pane-searchbar-problem

[EinfachHans]

Note: It works if Modal behind is closed: Press esc

[roman-rr]

Note that simple html input <input /> also unable to focus with opened modal.
Modal with display: none or visibility: hidden allow to focus inputs again.

[liamdebeasi]

Thanks for the issue. We recently improved the accessibility of overlay components by trapping focus inside the modals. This had the unexpected side effect of the modal stealing focus away from the pane when the pane is presented via a modal.

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

npm i @ionic/[email protected]

[roman-rr]

@liamdebeasi
Thank you for investigation!
Fixed with npm i @ionic/[email protected]

[EinfachHans]

Hey @liamdebeasi - just tested too, works fine for me! 😊

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/21856, and a fix will be available in an upcoming release of Ionic Framework.

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