Grid column auto-width doesn't work with async loaded data

[sissbruecker]

When loading data asynchronously, autoWidth does not properly resize grid columns.

Reproduction:

function App() {
    const [items, setItems] = useState<number[] | undefined>();

    useEffect(() => {
       setTimeout(() => {
           const generatedItems = Array.from({length: 10}, (_, i) => i);
            setItems(generatedItems);
        }, 100);
    }, []);

    return (
        <div>
            <Grid items={items}>
                <GridColumn header="A" autoWidth flexGrow={0} renderer={model => `A long column text ${model.item}`}/>
                <GridColumn header="B" autoWidth flexGrow={0} renderer={model => `B ${model.item}`}/>
                <GridColumn header="C" autoWidth flexGrow={0} renderer={model => `C ${model.item}`}/>
            </Grid>
        </div>
    )
}

Outcome:

Version: 2.4.0-alpha2

Related:

• https://github.com/vaadin/react-components/issues/129
• https://github.com/vaadin/react-components/pull/180

[sissbruecker]

Was also reproducable in the docs grid-content.tsx example using the same alpha version, when removing the workaround for resizing workaround.