bug: Cannot focus any element inside of IonModal while IonMenu is open.

[Cyral]

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

Elements inside an IonModal should be focusable (and editable) at all times. When an IonMenu is open in the background, the focus gets trapped inside of the menu and input elements inside the modal cannot be used.

Screen.Recording.2021-12-09.at.9.10.33.PM.mov

Expected Behavior

Elements inside an IonModal cannot be focused (meaning inputs cannot be typed in) if an IonMenu is open (behind the modal).

Steps to Reproduce

Create an IonMenu with a button that launches an IonModal. Both the menu and the modal should have an input element. If the menu has no inputs, the bug doesn't seem to occur.

Code Reproduction URL

https://github.com/Cyral/ionic-24361

Ionic Info

Ionic 5.9.2 w/ React

No response

Additional Information

The input element inside the IonModal receives a focus event, but it is quickly blurred and the last descendant of the IonMenu is then focused. The stack trace from adding a focus event handler tot he last menu descendant is:

t.focusLastDescendant	@	ion-menu_3.entry.js:1
t.trapKeyboardFocus	@	ion-menu_3.entry.js:1
handleFocus	@	ion-menu_3.entry.js:1

I believe this commit introduced in 5.8.5 is the issue: bdb268a Reverting to 5.8.4 fixes the issue

[liamdebeasi]

Thanks for the issue. Can you provide some more context as to why the menu needs to stay open when the modal is also visible in this scenario? I would like to understand the use case before we make any potential changes.

In general, focus should remain trapped inside of a menu when it is open to keep the experience accessible, which is why the focus is not being moved to the modal.

[Cyral]

Thanks for the issue. Can you provide some more context as to why the menu needs to stay open when the modal is also visible in this scenario? I would like to understand the use case before we make any potential changes.

In general, focus should remain trapped inside of a menu when it is open to keep the experience accessible, which is why the focus is not being moved to the modal.

In my app, the menu has various controls (including inputs) to filter items in a list. These filters can also be saved by the user, and later edited. If the user edits a filter, the menu should not close otherwise they will lose their place after closing the modal.

In any case, the focus should be trapped in the menu or modal that is on top of all other content.

[Cyral]

RPReplay_Final1639414774.MP4

Here is a video of the UI in action, I have reverted to a previous version of Ionic until this is fixed since it broke the filter editing dialog.

[hoangnv2nf]

I have same issue in Ionic v6.

[liamdebeasi]

Thanks for the issue. Can everyone try the following dev build and let me know if it resolves the issue?

Angular

npm install @ionic/[email protected]

React

npm install @ionic/[email protected] @ionic/[email protected]

Vue

npm install @ionic/[email protected] @ionic/[email protected]

Stencil/Vanilla JavaScript

npm install @ionic/[email protected]

[Cyral]

@liamdebeasi Thank you, it resolves it for me.

[liamdebeasi]

Great! I am going to keep this issue open until #24611 is merged. Thanks for testing!

[liamdebeasi]

Thanks for the issue. This has been resolved via #24611, and a fix will be available in an upcoming release of Ionic Framework.

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