useOption hook throws errors when used with Virtualizer and filtering

[akeohanePing]

Hi there. I am trying to implement a combobox with virtualizer similar to this code sandbox example. https://codesandbox.io/s/yb9cq?file=/src/App.tsx

It appears that when filtering the options through entering a custom text input, the useOption hook throws an error. it seems like the hook is trying to find the rendered option in the collection state, but that the option is no longer in that set, because it has been filtered out. I believe it is the function created at line 125 in this file. https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/listbox/src/useOption.ts

To get around this n the example codesandbox, the useOption hook is called conditionally, (line 67 of ListBox.js) which is an implementation that I am not sure reflects best practices, as it requires an exception/ignore to general es-lint standards.

Also this implementation results in blank space being rendered where a filtered option would go, instead of removing that space entirely. see the attached screen grab.

https://user-images.githubusercontent.com/80434043/186011534-4e46c318-d064-458c-bb6c-f9ed74cf6073.mov

At this present moment, I have removed to the virtualizer to achieve the functionality desired, but our team will need to implement an implementation with a virtualizer in the near future. Please let me know if something is off with the implemenation linked in the codesandbox, or if I need to provide additional information.

Thanks, Andrew

[snowystinger]

I see in our example that typing "6" for instance, causes a bunch of blank space. Thanks for the issue!

This isn't a problem in our React Spectrum component implementation, that might be a good place to start comparing. The React Aria examples are meant to be smaller code examples, so I'm sure we just overlooked something. One interesting thing is that if you cause a re-render of the list (ie scrolling) after typing 6, all the blank rows go away, so the collection would appear to be stale for a moment as you suggested.

I also wouldn't want to call a hook conditionally, it would have undefined behavior potentially. Best to avoid.

[akeohanePing]

Circling back on this, I noticed the errors occur in react versions 16 and 17, but not in version 18. I'm curious if you all have any thoughts or insight on that?

[snowystinger]

Hey, thanks for the ping. I had some time and took a look at your codesandbox again. Couple of things I noticed:

• you have a bunch of very specific versions of many of our packages. this can lead to duplicate versions if you aren't careful, and it's very hard to de-dupe them in codesandbox. easiest way to handle it is to just use the latest version of all of our packages
• React StictMode and us do not get along at the moment. we have an umbrella issue where we are addressing that https://github.com/adobe/react-spectrum/issues/779
• conditional calling of hook useOption (as noted before)
• no idea if this is playing an issue, but react-scripts has a newer version as well, I updated it at some point while working on your sandbox, didn't try undoing it

here's the fixed/working version https://codesandbox.io/s/dawn-cloud-duddgc?file=/src/ComboBox.tsx

[devongovett]

Closing since looks like there is a working version.

[akeohanePing]

Thanks for the bump.

Yes, STRICT MODE was the issue here.

Removing strict mode, resolved the issue