MenuBar SubMenuItems render the focus ring on hover
RSM-SLU opened this issue · 2 comments
Description of the bug
The Bug is reproducible in the documentation.
- Head to https://vaadin.com/docs/latest/components/menu-bar#open-on-hover
- Hover over "Share" -> "On social media": No menu item (Facebook, Twitter, Instagram) has a focus ring
- Now hover over "By email" first, then "On social media": Now "Facebook" has a focus ring
Expected behavior
No focus ring should appear, even if a previous icon was hovered before.
Minimal reproducible example
Reproducible in the official documentation, see description.
Versions
- Vaadin / Flow version: 24, 23 (did not test earlier versions)
- Java version: 17 for my app, unknown for the documentation
- OS version: Windows 10
- Browser version (if applicable):
- Application Server (if applicable):
- IDE (if applicable):
This issue is also reproducible in ContextMenu:
context-menu-focus-ring.mp4
It happens because after a submenu is closed, the parent item receives the focus here (note that it didn't have the focus before, as hovering over elements do not change focus). And then, the next time this item is expanded again, as it now has the focused attribute, the first item on the submenu will receive focus from this call, which ends up receiving the focus ring attribute here.
It looks like the logic that defines whether the first item should get focused (and the focus ring) needs some change. Perhaps detect whether the submenu is being opened by mouse or keyboard, and only apply the focus ring on the latter?
The logic that restores focus to the parent item on sub-menu close was added in vaadin/vaadin-context-menu#233. This was a fix for vaadin/vaadin-context-menu#230, see the clarification in vaadin/vaadin-context-menu#230 (comment).
I think we could fix this by only restoring focus to the parent item if the sub-menu contains focus before it's closed.
This should prevent focus outline from being shown when re-opening sub-menu (unless the keyboard was used).