bug: Popover focus trap breaks usage of material input fields which are rendered outside of the popover

[digaus]

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
• Nightly

Current Behavior

Cannot focus the input inside mat-select popover which is placed inside an Ionic Popover.

Reason is this change: fff4aec#diff-e6fe3d2c2375aaff02644f8767f36a3c49825d333f9764644871b0541a95b296R150

Since the input is rendered inside the cdk overlay it is outside of the popover and will be caught by the focus trap.

Expected Behavior

Being able to focus inputs outside the popover element if they are on top of the backdrop.

Steps to Reproduce

Add an input to the mat-select inside a popover

Code Reproduction URL

No response

Ionic Info

Am not using the Ionic CLI, only "@ionic/angular": "6.1.12"

Additional Information

No response

[digaus]

Nevermind, I can just add ion-disable-focus-trap

[digaus]

Reopen because it is not documented anywhere but in code:

https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/overlays.ts#L151

Also maybe it should be implmented better and also check if the element which is focused is outside the popover but has a higher z-index

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #24646.

You can use ion-disable-focus-trap, but it is a private API and not subject to the normal breaking change rules so use with caution.

[digaus]

Oh sorry somehow missed that issue

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