perf: no needed to change highlight index on every mousemove events

ref: soc221b#212
c13c83 · Jun 12, 2021 · a4eedb2 · a4eedb2
1 parent c9858cf
commit a4eedb2
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 19 deletions.
diff --git a/cypress/integration/a11y/kdb-interaction/multiple.spec.js b/cypress/integration/a11y/kdb-interaction/multiple.spec.js
@@ -17,7 +17,7 @@ context('kbd interaction', () => {
     cy.get('[aria-owns="vs1-listbox"]').click()
     cy.get('[id="vs1-option-2"]').click()
 
-    cy.get('[id="vs1-option-0"]').trigger('mousemove')
+    cy.get('[id="vs1-option-0"]').trigger('mouseenter')
     cy.get('[aria-owns="vs1-listbox"]').should('have.attr', 'aria-activedescendant', 'vs1-option-0')
     cy.get('.icon.arrow-downward').click()
     cy.get('[aria-owns="vs1-listbox"]').click()
@@ -48,7 +48,7 @@ context('kbd interaction', () => {
   it('move focus to first option when enter the home key', () => {
     cy.visit(path.join(__dirname, 'multiple.html'))
     cy.get('[aria-owns="vs1-listbox"]').click()
-    cy.get('[id="vs1-option-2"]').trigger('mousemove')
+    cy.get('[id="vs1-option-2"]').trigger('mouseenter')
     cy.get('[aria-owns="vs1-listbox"]').should('have.attr', 'aria-activedescendant', 'vs1-option-2')
 
     cy.get('[aria-owns="vs1-listbox"]').trigger('keydown', { key: 'home' })

diff --git a/cypress/integration/a11y/kdb-interaction/single.spec.js b/cypress/integration/a11y/kdb-interaction/single.spec.js
@@ -18,7 +18,7 @@ context('kbd interaction', () => {
     cy.get('[id="vs1-option-2"]').click()
     cy.get('[aria-selected="true"]').should('have.attr', 'id', 'vs1-option-2')
 
-    cy.get('[id="vs1-option-0"]').first().trigger('mousemove')
+    cy.get('[id="vs1-option-0"]').first().trigger('mouseenter')
     cy.get('[aria-owns="vs1-listbox"]').should('have.attr', 'aria-activedescendant', 'vs1-option-0')
     cy.get('.icon.arrow-downward').click()
     cy.get('[aria-owns="vs1-listbox"]').click()
@@ -49,7 +49,7 @@ context('kbd interaction', () => {
   it('move focus to first option when enter the home key', () => {
     cy.visit(path.join(__dirname, 'single.html'))
     cy.get('[aria-owns="vs1-listbox"]').click()
-    cy.get('[id="vs1-option-2"]').trigger('mousemove')
+    cy.get('[id="vs1-option-2"]').trigger('mouseenter')
     cy.get('[aria-owns="vs1-listbox"]').should('have.attr', 'aria-activedescendant', 'vs1-option-2')
 
     cy.get('[aria-owns="vs1-listbox"]').trigger('keydown', { key: 'home' })

diff --git a/cypress/integration/behavior/pointer/index.spec.js b/cypress/integration/behavior/pointer/index.spec.js
@@ -57,11 +57,11 @@ context('pointer', () => {
     cy.get('.vue-dropdown-item').first().next().next().should('have.class', 'highlighted')
   })
 
-  it('should change highlighted item when mousemove', () => {
+  it('should change highlighted item when mouseenter', () => {
     cy.visit(path.join(__dirname, 'with-searchable.html'))
 
     cy.get('.vue-select').click()
-    cy.get('.vue-dropdown-item').first().next().trigger('mousemove')
+    cy.get('.vue-dropdown-item').first().next().trigger('mouseenter')
 
     cy.get('.vue-dropdown-item').first().should('not.have.class', 'highlighted')
     cy.get('.vue-dropdown-item').first().next().should('have.class', 'highlighted')
@@ -79,19 +79,19 @@ context('pointer', () => {
     cy.visit(path.join(__dirname, 'with-searchable.html'))
 
     cy.get('.vue-select').click()
-    cy.get('.vue-dropdown-item').first().next().next().trigger('mousemove')
+    cy.get('.vue-dropdown-item').first().next().next().trigger('mouseenter')
     cy.get('.vue-dropdown-item').first().next().next().should('have.class', 'highlighted')
 
     cy.focused().type('e')
     cy.get('.vue-dropdown-item').first().next().should('have.class', 'highlighted')
   })
 
-  it('should change highlighted item when mousemove in filter', () => {
+  it('should change highlighted item when mouseenter in filter', () => {
     cy.visit(path.join(__dirname, 'with-searchable.html'))
 
     cy.get('.vue-select').click()
     cy.focused().type('e')
-    cy.get('.vue-dropdown-item').first().next().trigger('mousemove')
+    cy.get('.vue-dropdown-item').first().next().trigger('mouseenter')
 
     cy.get('.vue-dropdown-item').first().should('not.have.class', 'highlighted')
     cy.get('.vue-dropdown-item').first().next().should('have.class', 'highlighted')
@@ -116,7 +116,7 @@ context('pointer', () => {
     cy.visit(path.join(__dirname, 'with-disabled.html'))
 
     cy.get('.vue-select').click()
-    cy.get('.vue-dropdown-item.disabled').trigger('mousemove')
+    cy.get('.vue-dropdown-item.disabled').trigger('mouseenter')
 
     cy.get('.vue-dropdown-item.disabled').should('not.have.class', 'highlighted')
   })
@@ -125,9 +125,9 @@ context('pointer', () => {
     cy.visit(path.join(__dirname, 'with-disabled.html'))
 
     cy.get('.vue-select').click()
-    cy.get('.vue-dropdown-item').first().trigger('mousemove')
+    cy.get('.vue-dropdown-item').first().trigger('mouseenter')
     cy.get('.vue-dropdown-item').first().should('have.class', 'highlighted')
-    cy.get('.vue-dropdown-item.disabled').trigger('mousemove')
+    cy.get('.vue-dropdown-item.disabled').trigger('mouseenter')
 
     cy.get('.vue-dropdown-item').first().should('have.class', 'highlighted')
     cy.get('.vue-dropdown-item.disabled').should('not.have.class', 'highlighted')
@@ -137,7 +137,7 @@ context('pointer', () => {
     cy.visit(path.join(__dirname, 'removable.html'))
 
     cy.get('.vue-select').click()
-    cy.get('.vue-dropdown-item').first().next().trigger('mousemove')
+    cy.get('.vue-dropdown-item').first().next().trigger('mouseenter')
     cy.get('.vue-dropdown-item').first().next().trigger('click')
     cy.get('.vue-dropdown-item').first().next().trigger('click')
 

diff --git a/src/components/dropdown.vue b/src/components/dropdown.vue
@@ -21,7 +21,7 @@
           highlighted: option.originalIndex === highlightedOriginalIndex,
           group: option.group,
         }"
-        @mousemove="handleMousemove($event, option)"
+        @mouseenter="handleMouseenter($event, option)"
         role="option"
         :id="`vs${comboboxUid}-option-${index}`"
         :aria-selected="option.selected ? true : option.disabled ? undefined : false"
@@ -63,7 +63,7 @@ export default {
       required: true,
     },
   },
-  emits: ['click-item', 'mousemove'],
+  emits: ['click-item', 'mouseenter'],
   setup(props, context) {
     const dataAttrs = inject('dataAttrs')
 
@@ -72,14 +72,14 @@ export default {
       context.emit('click-item', event, option)
     }
 
-    const handleMousemove = (event, option) => {
-      context.emit('mousemove', event, option)
+    const handleMouseenter = (event, option) => {
+      context.emit('mouseenter', event, option)
     }
 
     return {
       dataAttrs,
       handleClickItem,
-      handleMousemove,
+      handleMouseenter,
     }
   },
 }

diff --git a/src/index.vue b/src/index.vue
@@ -118,7 +118,7 @@
       ref="dropdown"
       v-model="optionsWithInfo"
       @click-item="addOrRemoveOption"
-      @mousemove="(ev, option) => pointerSet(option.originalIndex)"
+      @mouseenter="(ev, option) => pointerSet(option.originalIndex)"
       :comboboxUid="instance.uid"
       :maxHeight="maxHeight"
       :highlightedOriginalIndex="highlightedOriginalIndex"