vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
470 stars 83 forks source link

[grid-pro] Custom component edit field (combo box) shows id of selected item before showing the actual value when switching edit #8234

Open mukherjeesudebi opened 14 hours ago

mukherjeesudebi commented 14 hours ago

Description

when selecting from the combo box and switching to next if the network is a little slow then the id of the selected item is visible before the actual value is.

Similar issues:

  1. https://github.com/vaadin/web-components/issues/2550
  2. https://github.com/vaadin/flow-components/issues/6816

https://github.com/user-attachments/assets/56ef4a47-799e-4b66-9e18-7490eec65c4a

Expected outcome

The id should never be shown.

Minimal reproducible example

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

        for (int i = 0; i < 10; i++) {
            bowsers.add(new Browser("Chrome"));
        }

        GridPro<Browser> grid = new GridPro<>();
        grid.setEditOnClick(true);
        grid.setItems(bowsers);

        ComboBox<String> comboBox = new ComboBox<>();
        comboBox.setItems("Chrome", "Edge", "Firefox", "Safari");

        grid.addEditColumn(Browser::getName)
                .custom(comboBox, Browser::setName)
                .setHeader("Name");

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

        add(grid);
    }

    public static class Browser {
        private String name;

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

        public String getName() {
            return name;
        }

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

    }
}

Steps to reproduce

  1. Add the code to vaadin 24.4.18
  2. Enable network throttling to simulate slow connection
  3. Click a cell to open the custom editor and select from the list of items
  4. Select another item

Environment

Vaadin version(s): 24.4.18

Browsers

No response

tomivirkki commented 13 hours ago

Also referenced here https://github.com/vaadin/web-components/pull/8232#issuecomment-2503274585