Tabbing GridPro cells with custom editor emits item property changes

[tomivirkki]

Description

When using a custom editor in GridPro, tabbing through the column cells briefly displays wrong values in the blurred cells on slow network connection. This also produces unnecessary ItemPropertyChangedEvents with unchanged values.

Kapture.2024-11-13.at.10.53.07.mp4

Expected outcome

• The blurred cells should not display invalid values
• No ItemPropertyChangedEvent should be fired when there are no edits

Minimal reproducible example

@Route(value = "grid-pro-custom-editor")
public class GridProCustomEditorPage extends Div {
    public GridProCustomEditorPage() {
        List<SamplePerson> persons = new ArrayList<>();

        for (int i = 0; i < 10; i++) {
            persons.add(new SamplePerson("Person " + i));
        }

        GridPro<SamplePerson> grid = new GridPro<>();
        grid.setEditOnClick(true);
        grid.setItems(persons);

        TextField component = new TextField();
        grid.addEditColumn(SamplePerson::getName)
                .custom(component, SamplePerson::setName)
                .setHeader("Name");

        grid.addItemPropertyChangedListener(e -> {
            add(new Div("Item property changed. name: " + e.getItem().getName()));
        });

        add(grid);
    }
    
    public static class SamplePerson {
        private String name;

        public SamplePerson(String name) {
            this.name = name;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

    }
}

Steps to reproduce

• Open the app
• Enable network throttling to simulate slow connection
• Click a cell to open the custom editor
• Use keyboard tab to quickly loop over the column cells

Environment

Vaadin version(s): All versions with GridPro

Browsers

Issue is not browser related