wire-elements/modal

Focus trapping? Unable to focus on CKEditor link input (positioned absolutely, outside modal DOM)

Closed this issue · 1 comments

I'm struggling with something that a simple z-index can't seem to fix.

I'm using CKEditor 5 (the leading WYSIWYG editor) in a Wire Elements modal. When inserting a link, a popover should appear with an input field for the URL. Initially, this popover appeared underneath the modal, rendering it invisible. This was easily fixed by adjusting the z-indexes.

However, I can't get focus inside the URL input field, and I believe this is because CKEditor popovers are rendered in an absolutely positioned container that is a direct child of the <body>, making it a modal sibling instead of a child. Hence, I'm essentially attempting to focus on an element outside of the modal, which is suspect is being prevented?

Is there some sort of focus trapping going on that I can disable?

Turns out it was a feature, not a bug :) Solved by removing the following attribute from the modal dialog tag:

x-trap.noscroll.inert="show && showActiveComponent"