fix: the dropdown should only automaticlly scroll to selected option …

…after open ref: #206
soc221b · Jun 5, 2021 · ab91ac9 · ab91ac9
1 parent e8c6493
commit ab91ac9
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/cypress/integration/behavior/pointer/highlight-selected-with-multiple.html b/cypress/integration/behavior/pointer/highlight-selected-with-multiple.html
@@ -0,0 +1,47 @@
+<!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 app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = ref([100])
+          const options = Array(100)
+            .fill(null)
+            .map((_, i) => i + 1)
+
+          return {
+            selectedOptions,
+            options,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+          highlight-selected
+          multiple
+        ></vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/behavior/pointer/index.spec.js b/cypress/integration/behavior/pointer/index.spec.js
@@ -18,6 +18,16 @@ context('pointer', () => {
     cy.get('.vue-dropdown-item').last().should('have.class', 'highlighted')
   })
 
+  it('should only automaticlly scroll to selected option after open', () => {
+    cy.visit(path.join(__dirname, 'highlight-selected-with-multiple.html'))
+
+    cy.get('.vue-select').click()
+    cy.get('.vue-dropdown-item').first().click()
+    cy.get('.vue-dropdown-item').last().click()
+
+    cy.get('.vue-dropdown-item').last().should('have.class', 'highlighted')
+  })
+
   it('should select highlighted item when press enter key', () => {
     cy.visit(path.join(__dirname, 'with-searchable.html'))
 

diff --git a/src/index.vue b/src/index.vue
@@ -600,7 +600,8 @@ const VueSelect = {
     }
     watch(
       () => [isFocusing.value, normalized.options, selectedValueSet.value],
-      () => {
+      (_, oldValue) => {
+        if (oldValue?.[0] === true) return
         if (isFocusing.value === false) return
         if (normalizedModelValue.value.length === 0) return
         pointerSet(normalized.options.findIndex(option => selectedValueSet.value.has(normalized.valueBy(option))))