search

vaadin / flow-components

Java counterpart of Vaadin Web Components
100 stars 66 forks source link

[menu-bar][tooltip] Vaadin-menu-bar-button doesn't show a tooltip with keyboard focus #5518

Open juuso-vaadin opened 1 year ago

juuso-vaadin commented 1 year ago

Description

Focusing the vaadin-menu-bar-button with keyboard doesn't reveal a tooltip. If tooltip has been added to vaadin-menu-bar, that is displayed when focus is within component. Buttons don't show tooltip even when menubar doesn't have a tooltip.

https://github.com/vaadin/flow-components/assets/19607782/634017cf-ac63-43d3-83ff-da045a04191b

Expected outcome

Keyboard focus should work the same as hovering on mouse.

Minimal reproducible example

MenuBar menuBar = new MenuBar();

MenuItem item1 = menuBar.addItem("Item 1");
MenuItem item2 = menuBar.addItem("Item 2");

Tooltip tooltip = Tooltip.forComponent(menuBar).withText("MenuBar");
Tooltip tooltip1 = Tooltip.forComponent(item1).withText("Item 1");
Tooltip tooltip2 = Tooltip.forComponent(item2).withText("Item 2");

Steps to reproduce

Focus menubar items with keyboard

Environment

Vaadin version(s): 23.3.24 OS: macOS

Browsers

Chrome

web-padawan commented 1 year ago

Thanks for the issue. Please note that MenuBar has built-in Tooltips support for individual buttons. I guess the issue is that internal logic intercepts focus events, making it impossible to set an individual tooltip on the whole MenuBar component.

juuso-vaadin commented 1 year ago

Adding tooltips to MenuItem with built-in method solves the issue with keyboard focus 👍

An edge case still remains. If tooltip is also added to MenuBar, both tooltips will be displayed at the same time. image

juuso-vaadin commented 1 year ago

For better DX the MenuItem should probably implement setTooltipText().

web-padawan commented 1 year ago

An edge case still remains. If tooltip is also added to MenuBar, both tooltips will be displayed at the same time.

This is expected as the tooltip managed by MenuBar is using manual mode and does not respect other tooltips.

timbo86 commented 3 months ago

Thanks for the issue. Please note that MenuBar has built-in Tooltips support for individual buttons. I guess the issue is that internal logic intercepts focus events, making it impossible to set an individual tooltip on the whole MenuBar component.

As far as I can see, this is working only for root items. Submenu items do not show build in tooltips, even if setTooltipText is called on them.