Flyout focus get lost when opening a subsection

baluv3 → credited alvarito75 → .

Working on this now

This is a tough one, I'd love some input from others!

The flyout is closing only when you click the last list item's dropdown (shown in the video) because you are technically no longer "hovering" over the flyout. An easy way to illustrate this is to open the "search and metadata" dropdown, then open the "web services" dropdown. The issue won't happen in this case because "search and metadata" and "web services" each only have one child list item (meaning no flyout height change), whereas "development" has 4 child list items and therefore there is a drastic height change for the flyout as it's closes.

If we were to remove the functionality where opening one dropdown closes another, this issue would go away because there will be no sudden height change on the flyout. This is really the only solution I can see to this problem, but welcome other thoughts.

claireristow → credited mherchel → .

Suggestion from @mherchel on slack:

"... a way around this would be to check for focus inside of the submenu before you close. TBH, if focus is inside of the submenu, it should remain opened because of 2.4.7 focus visible."

Taking this issue back to implement the above ^

This solution is not currently working on Safari because Safari doesn't focus on button elements when clicked. Therefore the issue in the code is with my use of document.activeElement which returns the expected element in all browsers except for safari.

I can work on an alternative method next week when I'm back from PTO but if someone else wants to work on this in the meantime, feel free!

Working on this now

Merged!

Automatically closed - issue fixed for 2 weeks with no activity.