A way to select the row item of an active cell

Flow
1

Hi
Does anyone know a way to select the row / item of a grid when tabbing through the editable cells?
I can select a row then go into the first cell, but when I tab past the last cell to the next row, the previous row remains selected. I’ve tried invoking a grid.select from a cell focus listener, but then the cell text input looses focus and I did not find a way to get the focus back in there. (not by calling the focus method on the text input again from the selectionchanged event, also not delayed using push)
I would like to be able to know which row to delete or copy when the respective button is pressed in the tool bar. Also visually it look better when the row you are editing is highlighted.

Thanks
Sander Postma

2

Which version of Vaadin you are using?

3

Hi,

At the time I submitted the question I was on 17.0.8, but this week I switched to 18.0.1. In the mean time, after some more testing & tweaking I managed to hack around the issues so I’m good for now.
I will document what I did in case others are running into this.

I’m using the grid for data entry so all cells are editable like with a spreadsheet and the data entities aren’t POJO’s but objects with Map’s inside them. So I’m using ComponentRenderers which builds a layout with a text field sometimes along with a search button.

I’ve implemented a focus listener on the text field and when I tried a gridControl.getSelectionModel().selectFromClient() instead of grid.select(), the selectionModel updates correctly while the focus event is not disturbed. Then to get the row selected on the client side while bypassing the refresh actions that are triggered when calling select() I had to hack the grid a bit to be able to call the package-private method grid.doClientSideSelection(). Instead of using reflection I chose to add this class to my project:

package com.vaadin.flow.component.grid;

import java.util.Set;

public class GridWithClientSelect<T> extends Grid<T> {

    public void clientSelect(Set<T> items) {
        super.doClientSideSelection(items);
    }
}

Then I had another issue: the cell border is not activated when clicking on the control rather then tabbing into it. For unknown reasons the “focus-ring” attribute is not set and I had to manually set and remove that. In the focus listener event I did a:

component.getElement().setAttribute("focus-ring", "");

But I also had to remove it using removeAttribute, otherwise the second time a cell is visited it won’t work anymore. I’m keeping the state of the last focused cell outside the grid and when a new cell gets the focus I remove that attribute from the previous cell.