Can't interact with elements outside of the container tree

Hello!

Description

I have a form that works as a focus trap container, and inside of it I have an input which works as a location picker root (using Google Maps Autocomplete Widget):

Document:
-------------------------
|  focus trap container |
|  [autocomplete]       |
-------------------------
[google autocomplete results]

The problem is that the dropdown with results that Google widget produces is appended to the page outside of the container, and later positioned absolutely to sit exactly below the input:

The current implementation of this lib makes it impossible to select dropdown elements, because handler for click looks like that:

  function checkClick(e) {
    if (config.clickOutsideDeactivates) return;
    if (container.contains(e.target)) return; // => false
    e.preventDefault();
    e.stopImmediatePropagation();
  }

Second condition isn’t meet because dropdown actually sits outside of the container, but from the user’s perspective, it’s still the same form one would like to interact with. As a result, you can’t pick items from this dropdown.

[jtomaszewski]

Instead of passing some list, which might not be enough for all the scenarios, I think the best future solution would be to just allow the user to define a function that tells “should this click be blocked?”.

Something similar to https://github.com/willmcpo/body-scroll-lock#allowtouchmove .

So we could add a parameter allowOutsideClick(event: MouseEvent) to createOptions ( https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions ).

So the function above would be like

function checkClick(e) {
    if (config.clickOutsideDeactivates) return;
    if (container.contains(e.target)) return;
    if (config.allowOutsideClick && config.allowOutsideClick(e)) {
         return;
    }

    e.preventDefault();
    e.stopImmediatePropagation();
  }

Although, I agree with @dougalg, that sometimes it might be a big code/DOM-smell. (This should be noted in README.)

Another question: If you let somebody click on an element outside of the DOM tree, the focus will jump to that element. Will focus trap still work then (shift-tab / tab should lead back to the focus trap)? That’s something that we’d need to check while implementing this allowOutsideClick as well.

[stefcameron]

Closing issues older than 2020. Please LMK if this is still a problem.