Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: https://github.com/ionic-team/ionic-framework/commit/fff4aec6cfbd48566594a05f4af57dd0578977a8#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

Issue Analytics

State:
Created a year ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

liamdebeasicommented, Jul 8, 2022

Thanks for the issue. I am going to close this as a duplicate of https://github.com/ionic-team/ionic-framework/issues/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.

0reactions

ionitron-bot[bot]commented, Aug 7, 2022

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.

Top Results From Across the Web

bug: focus trap interferes with non-Ionic overlays presented ...

This appears to be an issue with focus trapping. When you present ion-modal , we prevent focus from leaving the modal for better...

Prevent auto focus of a material-ui popover element

The pop-up always gets focussed. I have tried programmatically setting the focus using refs but I cannot give a stateless function component (I' ......

10 Most Common Bootstrap Mistakes That Developers Make

Common Bootstrap Mistake #6: File input button component problem. Bootstrap doesn't have a designated component for a file upload button. A simple and...

MDB 5 Changelog - Material Design for Bootstrap

This is a changelog of Material Design for Bootstrap - a free, MIT-licensed UI Kit ... Convert MDB components to CSS variables; Fixed...

Accessibility - React

To illustrate this, let's look at a prolific example of broken accessibility caused by click events. This is the outside click pattern, where...