react-spectrum
react-spectrum copied to clipboard
adobe
List State: `collection.getItem()` can return `undefined`
Provide a general summary of the issue here
Well. I have a very hard to reproduce bug - it's randomly happening - and hard to check in the current repo the returned type. So, I build a Combobox thanks to the hooks and load async some data to fill the items - with or without useAsyncList btw - and sometimes I receive:
Uncaught TypeError: Cannot read properties of undefined (reading 'index')
at useListState.ts:81:21
so looks like that here https://github.com/adobe/react-spectrum/blob/b5974ad1ccf2abc984c5cc6664b3c2d03de36768/packages/%40react-stately/list/src/useListState.ts#L63 collection.getItem() can return undefined
🤔 Expected Behavior?
It doesn't crash ^_^
😯 Current Behavior
It does crash :-/
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
It's a very hard issue to reproduce and hard to have an easy example unfortunately. I can't have a setup with the current reop that returns another type that "any", so it's really hard to find out what happens.
The only thing I know it that you need to:
- open the combobox
- put some text (not necessarily needed)
- select an item
- it reloads the items list because filterText changed (set by the selection)
- clean the selected Item
- it reloads the first 50 items (filterText = "")
- repeat
as fast as you can to trigger it. I feel like checking the possible returned value of getItem would be easier but I was unsuccessful here.
Version
latest
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
Windows
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
Just to make sure, you are just using the hooks in your implementation right? No RAC components? I ask because RAC has a different collections setup than what we had before.
Its hard for me to say what is occurring here without a reproduction I can dig into on my end, are you able to add breakpoints to find out what the collection and cached collection is? We could always add some more resiliency against the collection.getItem() returning a undefined but ideally that section of the code should always have a cached collection in which the previous focused key exists in.
i think they need add
let index = Math.min( ( diff > 1 ? Math.max(startItem?.index - diff + 1, 0) : // Optional chaining startItem?.index // Optional chaining ), itemNodes.length - 1);
Same problem on me, looks like overwriting package locally, and making all startItem variables optionally chained solves the issue. Not sure if owners of the package will accept that PR, but I can maybe fix that in my free time.
const startItem = cachedCollection.current.getItem(selectionState.focusedKey);
☝🏻 collection can be undefined when I spam on useAnycList items - set, delete, change quickly and the error is thrown. No issue when optionally chained
Adding the optional chaining sounds good to me, but just to double check: where does focus land with the above change? Does it get lost to the document body? Or does it land on the list itself?
In my case listState.selectionManager.focusedKey also returns null if none of the elements were focused
