Closed
Description
🐛 Bug Report
Change the ListData created through useListData() with APIs like remove/append/... does not refresh the visuals
🤔 Expected Behavior
Modifying the data list refreshes the List rendered in the browser window
😯 Current Behavior
List is rerendered until the container size changes (eg by resizing the window).
💁 Possible Solution
🔦 Context
I encountered this while looking into #977 and I guess this could also be the reason old data gets fed into useOptions.
💻 Code Sample
import React, { useState } from 'react';
import {useListData} from '@react-stately/data'
import { Provider, defaultTheme, Button, Flex, ListBox, Item, Text } from '@adobe/react-spectrum';
import './App.css';
function App() {
const options1 = [
{ id: 1, name: 'Aardvark', description: 'Aardvark Description' },
{ id: 2, name: 'Cat', description: 'Cat Description' },
{ id: 3, name: 'Dog', description: 'Dog Description' },
{ id: 4, name: 'Kangaroo', description: 'Kangaroo Description' },
{ id: 5, name: 'Koala', description: 'Koala Description' }
];
const options2 = [
{ id: 6, name: 'Penguin', description: 'Penguin Description' },
{ id: 7, name: 'Snake', description: 'Snake Description' },
{ id: 8, name: 'Turtle', description: 'Turtle Description' },
{ id: 9, name: 'Wombat', description: 'Wombat Description' }
];
let list = useListData(
{
initialItems: options1,
getKey: (item) => "item" + item.id
}
)
const clear = () => {
const keyList = list.items.map(item => "item" + item.id)
keyList.forEach( key => list.remove(key) )
}
const changeOptions = () => {
clear()
options2.forEach( val => list.append(val) )
}
return (
<Provider theme={defaultTheme}>
<Flex direction="column" rowGap={10}>
<ListBox items={list.items}>{(item) => (
<Item key={'item' + item.id} textValue={item.name}>
<Text>{item.name}</Text>
<Text slot="description">{item.description}</Text>
</Item>)}
</ListBox>
<Button variant="cta" onPress={clear}>Clear</Button>
<Button variant="cta" onPress={changeOptions}>Change options</Button>
</Flex>
</Provider>
);
}
export default App;🌍 Your Environment
| Software | Version(s) |
|---|---|
| react-spectrum | 3.3.0 |
| Browser | |
| Operating System |