Skip to content

Conversation

@onaluf
Copy link

@onaluf onaluf commented Jun 24, 2024

When a very large number of entries are present in the list, hovering on the dropdown results in a very noticeable slowness. I've tracked that down to the fact that the state gets updated each time a new element is hovered.

This was done in order to track the index of the hovered element in the list but as far as I can tell, at least in the current version of the code, the only reason to do this was to check that "something" was hovered or not. This in turn was used to decide if adding the class ${optionClassName}--focused was needed or not.

What I did here is remove hovered from the state altogether and use CSS to restrict the effect of the class in the case where the mouse is not hovering the list. From my tests this has no negative side-effects and remove all choppiness on large lists. It also removes the need for the special "hack" that was present in handleOptionMouseEnter for iOS because the content of the event is not redrawn anyway.

The tests linked to the removed functions have be removed as well. I'm not really sure what new test should be added (if any) but I'm happy to add them if you want!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant