Disable Dialog Focus Trap

[ryanpager]

I am trying to incorporate TinyMCE into my application (vue3, tailwind 2, headless ui). It seems like the focus trap is overriding all actions when tinymce pops their modals (i.e. hitting the code button).

My question is -- is there a way to override the Dialog component focus trap?

It seems like the Dialog is catching focus events, and wont allow any other clicks in the text areas.

Any help would be awesome.

[mdwt]

@ryanpager I encountered the same issue when adding a TinyMCE element to a Dialog (slider)

I saw this comment here that the focus trap is that way be design so no way to override it, so instead of trying to handle the click events I tried to just move the tiny-mce popup container from the body root level into a div inside the Dialog element (I placed it right below the actual editor).

That seems to work fine, and the overlay click-to-close also works as expected.

I'm using React so my workaround was to add a onMouseDown handler to the Dialog component and then check if the .tox-tinymce-aux element exists then move it. It will only exist if you click on a menu item in the TinyMCE editor.
I use jQuery.appendTo() to do the move and then set a state flag so that it's not moved again with subsequent clicks.

Pretty ugly but I'm happy with it :)

[Inambe]

Still no proper way to do this I guess? I've been using many dialogs in my application and focus-trap is hurting my head. I fix one issue and another issue all due to the focus trap.