checkbox has wrong value inside grid column

Hilla
1

There is a checbox inside a grid column. It has value according to item.status. The table shows only items which item.status = true. If I click to the first item, its value item.status becomes false and the item is hidden (as expected), but second item is rendered with unchecked component, however its value is true.

@state()
  private items: Array<{ name: string; status: boolean }> = [
    {
      name: "John",
      status: true,
    },
    {
      name: "Mike",
      status: true,
    },
  ];

 @query("#grid")
  private grid!: Grid;
...

<vaadin-grid-column
          header="Status"
          ${columnBodyRenderer<Record<string, string | boolean>>(
            (item) => html`
              <vaadin-checkbox
                .checked=${Boolean(item.status)}
                @click=${async (e: MouseEvent) => {
                  item.status = (e.target as HTMLInputElement).checked;
                  this.grid.clearCache();
                }}
              >
              </vaadin-checkbox>
            `,
            []
          ) as DirectiveResult}
        ></vaadin-grid-column>
...
async dataProvider(
    params: GridDataProviderParams<any>,
    callback: GridDataProviderCallback<any>
  ) {
    const result = this.items?.filter((item) => {
      return item.status == true;
    });

    callback(result ?? [], result?.length);
  }

The reproducable example in https://github.com/KardonskyRoman/hilla_test
Is it a bug or the code is wrong?
image.png
image.png

2

Tried your example, couldn’t find any workaround with this specific case
Seems to be a bug, could you please create a issue here:
https://github.com/vaadin/web-components/issues
as you already have a reproducible example.

3

thanks for the answer, bug is reported

4

Mentioned this in the ticket, but to also post it here: A workaround is to force the grid to rerender before clearing the cache:

this.grid.requestContentUpdate();
this.grid.clearCache();