dialog-polyfill icon indicating copy to clipboard operation
dialog-polyfill copied to clipboard

Slotted elements which appear within a dialog due to slots but are declared outside of the dialog cannot get focus in Firefox and Safari

Open carmour24 opened this issue 4 years ago • 2 comments

In Firefox and Safari, an element slotted into a dialog within a web component will not get focus events. The call to findNearestDialog from safeBlur_ returns null in this instance as the declaration of the slotted element is outside the dialog though the element itself appears within it.

This issue is similar to #189 in that findNearestDialog isn't able to properly traverse the DOM tree in this instance and a fix is to add an extra clause in here to navigate to the assignedSlot (where the element is inserted into the dialog).

I've created a repo at https://github.com/carmour24/slotted-element-modal-issue reproducing the issue and included a branch showcasing a fix I've made in a fork of dialog-polyfill which I'd be happy to submit a PR for.

carmour24 avatar Feb 27 '21 18:02 carmour24

I'm happy to accept PRs.

samthor avatar Mar 03 '21 07:03 samthor

I have this bug with polyfill in safari and slotted content. @carmour24 can you submit your PR?

nasim-git avatar Jul 15 '21 12:07 nasim-git