useCombobox does not work very well with virtualization

[kentcdodds]

• downshift version: latest

What you did:

Tried to combine useCombobox with react-virtual (though I expect this same problem would happen with any virtualization technique.

What happened:

Open up:

https://codesandbox.io/s/brave-einstein-vpvvo

Notice that if you focus the input and arrow down enough times, eventually the scrolling gets wacko.

I don't have a lot of time to explain, but hopefully the example helps you identify the issue.

The solution is to not get the node by the highlightedIndex alone, but by a unique identifier for the item.

So first, change itemRefs.current = [] to itemRefs.current = {}, then change this:

downshift/src/hooks/useCombobox/index.js

Line 316 in d2b273c

itemRefs.current.push(itemNode)

To this:

itemRefs.current[elementIds.current.getItemId(itemIndex)] = itemNode

And then update everywhere that references the itemRefs.current to retrieve the itemNode via the ID rather than the index. This fixes the bug for me.

Unfortunately, I have to move on and can't work on this myself right now. But hopefully that helps get anyone on the right track. Thanks and good luck!

[silviuaavram]

Thanks for trying this out. Is this useCombobox + react-virtual something we can advertise in the docsite as well?

[kentcdodds]

Once it's working, definitely!

[silviuaavram]

Oh so this issue is blocking it?

[kentcdodds]

Correct. With the way things currently work there's no way to do virtualization.

[silviuaavram]

I know why you got the bug at the end of the presentation. You were hitting the end of list, where you had to go from last -> 0. And when you are getting refs for items in getItemProps, you only get for the ones you actually render. And when switching focus from last to first, since you don't have the item ref saved, you pass undefined => boom.

Let's see how we can fix this.

[silviuaavram]

🎉 This issue has been resolved in version 5.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀