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 ondocument
, andfocusin
events are much less likely to be stopped. Listening forfocusin
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
- (Optional, though probably would make the next steps easier) Tackle #1994 (closed).
- Review how BootstrapVue implements:
- Figure out how to add a listener for
focusin
events inGlOutsideDirective
. The tricky part here is debouncing the listener. For instance, clicking outside of the element will then trigger both theclick
listener and thefocusin
handler, but we very likely only want the callback given toGlOutsideDirective
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 existingclick
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.
- 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