Skip to content

Investigate listening for focusin events in GlOutsideDirective

From #1426 (comment 839806079):

Investigating how BootstrapVue implements this behaviour for dropdowns, I discovered they also listen for bubbled click events on document, and so that is also subject to failure if something stops the propagation of the click event.

But! They also listen for focusin events on document, and focusin events are much less likely to be stopped. Listening for focusin also has the desirable property that if the user changes focus using the keyboard, the dropdown would also be closed; that is, it's not just closed by mouse events.

This directive should almost certainly adopt that behaviour.

Implementation plan

  1. (Optional, though probably would make the next steps easier) Tackle #1994 (closed).
  2. Review how BootstrapVue implements:
  3. Figure out how to add a listener for focusin events in GlOutsideDirective. The tricky part here is debouncing the listener. For instance, clicking outside of the element will then trigger both the click listener and the focusin handler, but we very likely only want the callback given to GlOutsideDirective to be called once for those events. We need a way to correlate those two events, somehow. Some questions/ideas to investigate:
    • Is there a reliable, cross-browser ordering to these events?
    • Should the focusin listener use event capturing (like the existing click listener) or should it use bubbling?
    • Do a simple timeout: ignore the "other" event in a certain short timespan after the first event. Perhaps within one animation frame (16ms) would be good enough for this?
    • See if there's some other way to correlate the events, e.g., if the eventTarget/relatedTarget are related?
    • Make the focusin listener dynamic on the consumer side? Probably via dynamic args, though not sure if this is reactive.
  4. The focusin behaviour should be opt-in, so as not to break the expectations of existing uses. Opting our dropdowns into this will have to be done carefully as well, since there are dropdowns which change this behaviour.
Edited by Mark Florian