focus-trap: Problem inside shadow dom
Hello!
Consider a <div> to which a shadow dom is attached.
If I then add elements below this and use focus-trap for a child element (modal dialog im my case) the click event on the shadow dom will trigger for all those child elements and the event will be cancelled by this code:
var checkClick = function checkClick(e) {
if (valueOrHandler(config.clickOutsideDeactivates, e)) {
return;
}
if (containersContain(e.target)) {
return;
}
if (valueOrHandler(config.allowOutsideClick, e)) {
return;
}
e.preventDefault();
e.stopImmediatePropagation();
}; //
If I change
if (containersContain(e.target)) {
to
if (containersContain(e.path[0])) {
it works.
path[0] will always be the actual clicked event, while the target in this case is the shadow dom parent.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 15 (10 by maintainers)
Commits related to this issue
- [#496] Support focus traps inside open shadow DOMs TODO: Fix Cypress test failures; don't know why they're failing. It all works fine in the demo... Fixes #496 — committed to focus-trap/focus-trap by stefcameron 3 years ago
- [#496] Support focus traps inside open shadow DOMs TODO: Fix Cypress test failures; don't know why they're failing. It all works fine in the demo... Fixes #496 — committed to focus-trap/focus-trap by stefcameron 3 years ago
- [#496] Support focus traps inside open shadow DOMs TODO: Fix Cypress test failures; don't know why they're failing. It all works fine in the demo... Fixes #496 — committed to focus-trap/focus-trap by stefcameron 3 years ago
- [#496] Support focus traps inside open shadow DOMs TODO: Fix Cypress test failures; don't know why they're failing. It all works fine in the demo... Fixes #496 — committed to focus-trap/focus-trap by stefcameron 3 years ago
- [#496] Support focus traps inside open shadow DOMs (#516) Fixes #496 — committed to focus-trap/focus-trap by stefcameron 3 years ago
@andersthorsen FYI, I managed to get my PR working. I think it works well, for both mouse and tab key. I will publish this in the next few days, as early as Saturday.