focusIn listener causes issues with outside elements

Re: #42

When certain Kendo UI elements are attached to the body outside the focus-trap (i.e. datepicker), it attempts to regain focus in the focusIn listener; even when using allowOutsideClick or clickOutsideDeactivates.

Not sure what the fix needs to be, but from the little time I have spent with this library, I think checking for these options in the focusIn handler is also needed.

Optionally, a new option could be introduced that either takes a string (selector) or a callback that can check if the clicked/focused element is allowed to take focus.

[stefcameron]

If anyone else who responded to this issue would still like to have a constructive discussion about a possible solution, I’m happy to. Y’all know where my thoughts are at so far.

[dstoch]

Maybe my use case is not exatly the same as Mark’s, but in general when we are talking about elements added directly to BODY I see two main problems (you’ve described it also eralier):

1. We cannot control 3rd party components to force them to add elements to some concrete container below body. They often add elements to body tag directly. So we cannot pass specific element below body when constructing focus-trap, we must update it using updateContainers() on the fly. I’ve already implemented this for Select2 using MutationObserver to observe changes in document.body and dynamically update list fo containers in focus-trap. Here possible improvement could be to allow to pass some “dynamic” selector to focus-trap, not concrete elements. But it is probably quite big change in code.
2. Event if we solved this first problem, the second one still exists: proper tab order (as @stefcameron decribed in last comment). And currently I don’t know how to solve this.

The whole problem comes form HTML/CSS limitations to handle such things like modals, dropdowns, etc. These all hacks with adding elements to body are problematic for operating from the keyboard becuase this braeks natural HTML elements order. Maybe someone knows some applications/websites when these things are properly implemented (eg. some government sites, which often are WCAG compliant)?