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

Most upvoted comments

@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.