Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MenuBar SubMenuItems render the focus ring on hover #6386

Closed
RSM-SLU opened this issue Jun 13, 2024 · 2 comments · Fixed by vaadin/web-components#7519
Closed

MenuBar SubMenuItems render the focus ring on hover #6386

RSM-SLU opened this issue Jun 13, 2024 · 2 comments · Fixed by vaadin/web-components#7519
Assignees
Labels

Comments

@RSM-SLU
Copy link

RSM-SLU commented Jun 13, 2024

Description of the bug

The Bug is reproducible in the documentation.

  1. Head to https://vaadin.com/docs/latest/components/menu-bar#open-on-hover
  2. Hover over "Share" -> "On social media": No menu item (Facebook, Twitter, Instagram) has a focus ring
  3. 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):
@AlainaFaisal AlainaFaisal added documentation Improvements or additions to documentation bug Something isn't working Impact: High Severity: Minor labels Jun 14, 2024
@mshabarov mshabarov removed the documentation Improvements or additions to documentation label Jun 25, 2024
@mshabarov mshabarov transferred this issue from vaadin/flow Jun 25, 2024
@FrediWa FrediWa self-assigned this Jul 1, 2024
@DiegoCardoso
Copy link
Contributor

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?

@web-padawan web-padawan assigned web-padawan and unassigned FrediWa Jul 8, 2024
@web-padawan
Copy link
Member

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants