bug: focus trap prevents focus from moving to overlays that do not use focus trapping

[soroush-gh]

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

I can not focus on search bar input for the "ngx-mat-select-search" or all inputs that they are using to add features such as add link in the MCE Editor when I am using them (mat-select / MCE-Editor) in the ionic-modal.

I thought it was for z-index conflicting and try different ways to solve it but I could not!

Expected Behavior

The end-user should be type anything in the inputs that I explained on the top.

Steps to Reproduce

.

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

[JeramieHallyburton]

I have created a simple reproduction of this issue. It appears if an ion-segment exists in the modal, any nested modal inputs cannot grab focus.

Stackblitz of ion-modal with an ion-segment present and tinyMCE editor
https://stackblitz.com/edit/modal-with-segment?file=src/app/app.component.html

1. Click Insert > Link
2. Observe the text inputs cannot gain focus

Stackblitz of ion-modal without an ion-segment present and tinyMCE editor
https://stackblitz.com/edit/modal-without-segment?file=src/app/app.component.html

1. Click Insert > Link
2. Observe you can focus and type into text inputs

[kalozoya-gregal]

I have the same problem with ngx-mat-select-search inside modal.

I have made an example where outside modal the input search of select works, but inside modal without an ion-segment i can't search select values.

https://stackblitz.com/edit/modal-without-segment-rhkczi?file=src/app/app.component.html

[liamdebeasi]

This appears to be an issue with focus trapping. When you present ion-modal, we prevent focus from leaving the modal for better accessibility. However, the tinyMCE editor is presented at the root of the app outside of the ion-modal. As a result, when you try to focus an input in the editor, ion-modal brings focus back to the first focusable element. In this case, that is the segment button.

[inexuscore]

This appears to be an issue with focus trapping. When you present ion-modal, we prevent focus from leaving the modal for better accessibility. However, the tinyMCE editor is presented at the root of the app outside of the ion-modal. As a result, when you try to focus an input in the editor, ion-modal brings focus back to the first focusable element. In this case, that is the segment button.

Is there a workaround to this issue? I'm using TinyMCE in an Ionic 7 project, the plugin dialogs (e.g. the TinyMCE Link Plugin) work fine on ionic pages, but not when I use an editor inside an ion-modal. Focus trapping! None of the input elements are focusable. Any ideas how I can get around this?

[soroush-gh]

This appears to be an issue with focus trapping. When you present ion-modal, we prevent focus from leaving the modal for better accessibility. However, the tinyMCE editor is presented at the root of the app outside of the ion-modal. As a result, when you try to focus an input in the editor, ion-modal brings focus back to the first focusable element. In this case, that is the segment button.

Is there a workaround to this issue? I'm using TinyMCE in an Ionic 7 project, the plugin dialogs (e.g. the TinyMCE Link Plugin) work fine on ionic pages, but not when I use an editor inside an ion-modal. Focus trapping! None of the input elements are focusable. Any ideas how I can get around this?

Use this CSS class ion-disable-focus-trap on creating ion-modal