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

[hatsantos]

Regarding the recent closed issue #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)
});

[liamdebeasi]

Hi everyone,

I have a dev build with a proposed feature to resolve this if anyone is interested in testing: 8.0.0-dev.11712850753.10c4a960

Note that this is an Ionic 8 dev build and is subject to the Ionic 8 breaking changes list.

To disable focus trapping, set the focusTrap property on either Modal or Popover to false. (Defaults to true)

[hatsantos]

Hi @liamdebeasi I will try to test it latter on.

My project in currently on version 7 so i will have to check what needs to be done to upgrade to version 8.

[kalozoya-gregal]

I have tested it with ngx-mat-select-search and it is fine.

https://stackblitz.com/edit/angular-4fujbn?file=src%2Fapp%2Fapp.component.html

Thanks.

[hatsantos]

I only had the opportunity to test it now.
I changed it from this:

To this:

No problems at all. ;)

But taking as an example by just disabling the focus trap when activating a certain component (dropdown) within the modal.
Previously, I used this technique:

onOpen(open: any) {
       this.ModalController.getTop().then(modal => modal?.classList.toggle('ion-disable-focus-trap', open));
}

Would there be any way to modify the focusTrap prop in this context?

[liamdebeasi]

Would there be any way to modify the focusTrap prop in this context?

In this case you could do something like modal.focusTrap = true to re-enable the focus trapping behavior. model is a reference to the ion-modal element.

Alternatively, you could pass a prop to the modal component that toggles focusTrap when invoked.

[liamdebeasi]

Thanks for the issue. This has been resolved via #29379, 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.