Cannot assign readonly items to Grid and ComboBox

[peholmst]

It is currently not possible to assign a readonly array as items to a Grid or a ComboBox (or possibly the other selection components as well; I haven't tried). The following code:

const items: readonly string[] = ["hello", "world"];

export default function MyComponent() {
    return <div>
        <Grid items={items} >
        </Grid>
    </div>
}

Gives the following error:

TS4104: The type readonly string[] is readonly and cannot be assigned to the mutable type string[]

If I remove readonly, it works. Since the selection components are not editing their own items, I think it should not matter whether the array I pass in is readonly or not.

[web-padawan]

This should be addressed in the web components so I transferred the issue here.

Note, in the past there used to be a plan to make all data structures readonly but it was then discarded.
We have an issue from that time, see #2321, see also vaadin/platform#2371.

IMO this would be a breaking change since it's currently possible to use something like comboBox.items.push('Item') in the web component, although we don't really use this internally - I only found a few cases in vaadin-crud:

web-components/packages/crud/src/vaadin-crud-mixin.js

Line 953 in a9ff39d

this.items.push(item);

web-components/packages/crud/src/vaadin-crud-mixin.js

Line 996 in a9ff39d

this.items.splice(this.items.indexOf(this.editedItem), 1);

We should investigate if there might be some other implications of using readonly items.
Also it would be good to have a list of components that would be affected by this change.

[peholmst]

In case it is useful, the context in which I ran into this problem was when I tried to use a full-stack signal as an items source for a grid and a combo box. That was not possible because the value getter returned a read-only array.

[sissbruecker]

Maybe we could do this to avoid breaking changes:

  get items(): TItem[] | null | undefined;
  set items(value: TItem[] | readonly TItem[] | null | undefined);

[yuriy-fix]

This also might affect other properties apart from the items. For example, selectedItems. We probably need to list all of the components + props of array types before changing it.