GridPro: Frozen editor cell is transparent on hover (can see overlapping cell)

[drewharvey]

Description

Chrome latest
Vaadin 22 beta 3

If the last frozen column is a GridPro editor column, the cell becomes transparent when the mouse is hovered over. You can actualy see the other cells behind it (if you scroll the non-frozen cells horizontally). See the gif below.

Live Demo (optional)

Minimal reproducible example

GridPro<String> grid = new GridPro<>();
grid.setWidth("500px");
grid.setHeight("200px");

ComboBox<String> editor = new ComboBox<>();
editor.setItems("John", "Terry", "Brandon", "Kevin");

// add some frozen editor columsn
grid.addEditColumn(item -> item)
        .custom(new TextField(), (v, t) -> {})
        .setHeader("Name")
        .setFrozen(true);

grid.addEditColumn(item -> item)
        .custom(new TextField(), (v, t) -> {})
        .setHeader("Name")
        .setFrozen(true);

grid.addEditColumn(item -> item)
        .custom(new TextField(), (v, t) -> {})
        .setHeader("Name")
        .setFrozen(true);

// add non frozen columns (enough to be able to scroll horizontally)
grid.addColumn(item -> item)
        .setHeader("DOB");

grid.addColumn(item -> item)
        .setHeader("DOB");

grid.addColumn(item -> item)
        .setHeader("DOB");

grid.setItems(Arrays.asList("Kevin", "John", "Ted"));

add(grid);

[tomivirkki]

Workaround:

theme-for: "vaadin-grid-pro"

[part~='editable-cell']:hover,
[part~='editable-cell']:focus {
  background-clip: initial;
  background-color: var(--lumo-base-color);

  box-shadow: inset 0 100vh var(--lumo-contrast-5pct);
}

The issue is caused due to the partly transparent background colors used for indicating editable cells.
Not sure if the above qualifies for a fix. @jouni ?

[jouni]

Ah, huge oversight on my part there, thanks for pointing it out.

I’d perhaps do the same as we do in other components: background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));