alphagov / accessible-autocomplete

An autocomplete component, built to be accessible.
https://alphagov.github.io/accessible-autocomplete/examples/
MIT License
900 stars 147 forks source link

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

Open onaluf opened 3 weeks ago

onaluf commented 3 weeks ago

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!