How to display an "Action item" cell when hovering over a grid row?

Flow
21

I figured out that it works only when you make the flex-grow = 0

22

So, the CSS trick above work only for a single-item MenuBar. If it has sub-menu, navigating to those submenus will naturally un-hover the row and hide the top-level menu bar while sub-menu is still visible. I’m guessing the sub-menues also need to be styled to have their visibility depend on the --menu-visibility?

23

Hmm, no, but the criteria by which the menubar is shown needs to be expanded. I have not tested this but I would expect adding the MB focus state would work.

I.e. in addition to showing it on row hover also show it when it has focus.

24

any example please

25

hmm, tested it now and apparently focus doesn’t work for that

26

And there is no state attribute on the vaadin-menu-bar root element for when it has a dropdown open.

27

there is, however, a style="pointer-events:auto;" attribute that gets set when a dropdown menu is opened, so maybe that can be used – it’s a bit hacky though:

  visibility: visible;
}```
28

However, unless you need to support older browser versions, I would instead use the :has selector and target menubars that have a menu item with the expanded state, like so:

  visibility: visible;
}```
29

So the entire solution, then, assuming you have applied a classname like grid-menu to the menubar, would be:

vaadin-grid::part(row):hover {
  --menu-visibility: visible;
}

.grid-menu {
  visibility: var(--menu-visibility, hidden);
}

.grid-menu:has([expanded]) {
  --menu-visibility: visible;
}```
30

@useful-whale thank you.