Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle hovered vs focused in CSS to improve performance on large lists #707

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

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