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

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+### Fixes
+ - Fix performance when hovering very large lists
+
 ## 3.0.0 - 2024-04-19
 
 ### Breaking changes

src/autocomplete.css

@@ -106,7 +106,7 @@
   background-color: #f3f2f1;
 }
 
-.autocomplete__option--focused,
+.autocomplete__menu:not(:hover) .autocomplete__option--focused,
 .autocomplete__option:hover {
   background-color: #1d70b8;
   border-color: #1d70b8;

src/autocomplete.js

@@ -64,7 +64,6 @@ export default class Autocomplete extends Component {
 
     this.state = {
       focused: null,
-      hovered: null,
       menuOpen: false,
       options: props.defaultValue ? [props.defaultValue] : [],
       query: props.defaultValue,
@@ -80,13 +79,10 @@ export default class Autocomplete extends Component {
     this.handleEnter = this.handleEnter.bind(this)
     this.handlePrintableKey = this.handlePrintableKey.bind(this)
 
-    this.handleListMouseLeave = this.handleListMouseLeave.bind(this)
-
     this.handleOptionBlur = this.handleOptionBlur.bind(this)
     this.handleOptionClick = this.handleOptionClick.bind(this)
     this.handleOptionFocus = this.handleOptionFocus.bind(this)
     this.handleOptionMouseDown = this.handleOptionMouseDown.bind(this)
-    this.handleOptionMouseEnter = this.handleOptionMouseEnter.bind(this)
 
     this.handleInputBlur = this.handleInputBlur.bind(this)
     this.handleInputChange = this.handleInputChange.bind(this)
@@ -180,12 +176,6 @@ export default class Autocomplete extends Component {
     })
   }
 
-  handleListMouseLeave (event) {
-    this.setState({
-      hovered: null
-    })
-  }
-
   handleOptionBlur (event, index) {
     const { focused, menuOpen, options, selected } = this.state
     const focusingOutsideComponent = event.relatedTarget === null
@@ -265,21 +255,10 @@ export default class Autocomplete extends Component {
   handleOptionFocus (index) {
     this.setState({
       focused: index,
-      hovered: null,
       selected: index
     })
   }
 
-  handleOptionMouseEnter (event, index) {
-    // iOS Safari prevents click event if mouseenter adds hover background colour
-    // See: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW4
-    if (!isIosDevice()) {
-      this.setState({
-        hovered: index
-      })
-    }
-  }
-
   handleOptionClick (event, index) {
     const selectedOption = this.state.options[index]
     const newQuery = this.templateInputValue(selectedOption)
@@ -427,7 +406,7 @@ export default class Autocomplete extends Component {
       hintClasses,
       menuClasses
     } = this.props
-    const { focused, hovered, menuOpen, options, query, selected, ariaHint, validChoiceMade } = this.state
+    const { focused, menuOpen, options, query, selected, ariaHint, validChoiceMade } = this.state
     const autoselect = this.hasAutoselect()
 
     const inputFocused = focused === -1
@@ -513,8 +492,7 @@ export default class Autocomplete extends Component {
       // And add the values computed for the autocomplete
       id: `${id}__listbox`,
       role: 'listbox',
-      className: menuClassList.join(' '),
-      onMouseLeave: this.handleListMouseLeave
+      className: menuClassList.join(' ')
     }
 
     // Preact would override our computed `className`
@@ -567,7 +545,7 @@ export default class Autocomplete extends Component {
         <ul {...computedMenuAttributes}>
           {options.map((option, index) => {
             const showFocused = focused === -1 ? selected === index : focused === index
-            const optionModifierFocused = showFocused && hovered === null ? ` ${optionClassName}--focused` : ''
+            const optionModifierFocused = showFocused ? ` ${optionClassName}--focused` : ''
             const optionModifierOdd = (index % 2) ? ` ${optionClassName}--odd` : ''
             const iosPosinsetHtml = (isIosDevice())
               ? `<span id=${id}__option-suffix--${index} style="border:0;clip:rect(0 0 0 0);height:1px;` +
@@ -585,7 +563,6 @@ export default class Autocomplete extends Component {
                 onBlur={(event) => this.handleOptionBlur(event, index)}
                 onClick={(event) => this.handleOptionClick(event, index)}
                 onMouseDown={this.handleOptionMouseDown}
-                onMouseEnter={(event) => this.handleOptionMouseEnter(event, index)}
                 ref={(optionEl) => { this.elementReferences[index] = optionEl }}
                 role='option'
                 tabIndex='-1'

test/functional/index.js

@@ -466,26 +466,6 @@ describe('Autocomplete', () => {
       })
     })
 
-    describe('hovering option', () => {
-      it('sets the option as hovered, does not change focused, does not change selected', () => {
-        autocomplete.setState({ options: ['France'], hovered: null, focused: -1, selected: -1 })
-        autocomplete.handleOptionMouseEnter({}, 0)
-        expect(autocomplete.state.hovered).to.equal(0)
-        expect(autocomplete.state.focused).to.equal(-1)
-        expect(autocomplete.state.selected).to.equal(-1)
-      })
-    })
-
-    describe('hovering out option', () => {
-      it('sets focus back on selected, sets hovered to null', () => {
-        autocomplete.setState({ options: ['France'], hovered: 0, focused: -1, selected: -1 })
-        autocomplete.handleListMouseLeave({ toElement: 'mock' }, 0)
-        expect(autocomplete.state.hovered).to.equal(null)
-        expect(autocomplete.state.focused).to.equal(-1)
-        expect(autocomplete.state.selected).to.equal(-1)
-      })
-    })
-
     describe('up key', () => {
       it('focuses previous element', () => {
         autocomplete.setState({ menuOpen: true, options: ['France'], focused: 0 })