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

[soroush-gh]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [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

[hatsantos]

Regarding the recent closed issue https://github.com/ionic-team/ionic-framework/issues/29056, is there a recomended way to avoid the focus trap on modal?

[GerardoTovar]

Thanks in my case, adding it using cssClass did not work for me, but adding it using an id before opening the modal worked perfectly for me. similar to the recent closed issue #29056 <ion-modal id="ionModals" addClass() { document.getElementById('ionModals')?.classList.add('ion-disable-focus-trap') }

[hatsantos]

Would it make sense in the ModalController object's configuration API to have a boolean to activate or not the focus trap?

Something like:

const modal = await this.modalCtrl.create({
      component: ModalExampleComponent,
      focusTrap: false // (default true)
});