fix: highlight closest option if original is unavailable

soc221b · Mar 27, 2021 · 34a277a · 34a277a
1 parent 28e0ae9
commit 34a277a
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 0 deletions.
diff --git a/cypress/fixtures/pointer/removable.html b/cypress/fixtures/pointer/removable.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { ref, createApp } = Vue
+      const deepCopy = value => JSON.parse(JSON.stringify(value))
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = ref(null)
+          const options = ref(['i', 'love', 'vue'])
+
+          const handleRemove = option => {
+            if (option === undefined) return
+            options.value.splice(options.value.indexOf(option), 1)
+          }
+
+          return {
+            selectedOptions,
+            options,
+            handleRemove,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+          @removed="handleRemove"
+        ></vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/behavior/pointer.spec.js b/cypress/integration/behavior/pointer.spec.js
@@ -88,4 +88,23 @@ context('pointer', () => {
     cy.get('.vue-dropdown-item').first().should('have.class', 'highlighted')
     cy.get('.vue-dropdown-item.disabled').should('not.have.class', 'highlighted')
   })
+
+  it('should highlight closest option if original one is unavailable', () => {
+    cy.visit('/cypress/fixtures/pointer/removable.html')
+
+    cy.get('.vue-select').click()
+    cy.get('.vue-dropdown-item').first().next().trigger('mousemove')
+    cy.get('.vue-dropdown-item').first().next().trigger('click')
+    cy.get('.vue-dropdown-item').first().next().trigger('click')
+
+    cy.get('.vue-dropdown-item').first().next().should('have.class', 'highlighted')
+
+    cy.get('.vue-dropdown-item').first().next().trigger('click')
+    cy.get('.vue-dropdown-item').first().next().trigger('click')
+
+    cy.get('.vue-dropdown-item').first().should('have.class', 'highlighted')
+
+    cy.get('.vue-dropdown-item').first().trigger('click')
+    cy.get('.vue-dropdown-item').first().trigger('click')
+  })
 })
diff --git a/src/hooks.ts b/src/hooks.ts
@@ -55,6 +55,11 @@ export const usePointer = (options: Ref<Option[]>, highlightedOriginalIndex: Ref
 
   watchEffect(() => {
     if (isSomeSelectable.value === false) highlightedOriginalIndex.value = null
+    if (options.value.length <= highlightedOriginalIndex.value) {
+      for (const option of options.value.reverse()) {
+        if (pointerSet(option.originalIndex)) break
+      }
+    }
     if (
       highlightedOriginalIndex.value === null ||
       isSelectable(options.value[highlightedOriginalIndex.value]) === false