fix: it should only fire removed event when there is one selected option

soc221b · May 2, 2021 · 3ebcfd6 · 3ebcfd6
1 parent 4a480ed
commit 3ebcfd6
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 1 deletion.
diff --git a/cypress/integration/events/removed/index.spec.js b/cypress/integration/events/removed/index.spec.js
@@ -38,4 +38,17 @@ context('removed event', () => {
       cy.then(finish)
     })
   })
+
+  it('should not fire event when there is no selected option', () => {
+    setResolve()
+    cy.visit(path.join(__dirname, 'single.html')).then(window => {
+      cy.get('.vue-select').click()
+      cy.then(() => {
+        window.removeEventListener('removed-custom-event', setReject)
+        window.addEventListener('removed-custom-event', setReject)
+      })
+      cy.get('.vue-dropdown').children().first().next().click()
+      cy.then(finish)
+    })
+  })
 })
diff --git a/cypress/integration/events/removed/single.html b/cypress/integration/events/removed/single.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 deepCopy = value => JSON.parse(JSON.stringify(value))
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = ref(null)
+          const options = ref(['i', 'love', 'vue'])
+          const handle = () => {
+            window.dispatchEvent(new Event('removed-custom-event'))
+          }
+          return {
+            selectedOptions,
+            options,
+            handle,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+          @removed="handle"
+        ></vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/src/index.vue b/src/index.vue
@@ -442,7 +442,7 @@ const VueSelect = {
         })
         context.emit('removed', option)
       } else {
-        if (!props.multiple) {
+        if (!props.multiple && normalizedModelValue.value.length === 1) {
           const removingOption = normalizedModelValue.value[0]
           normalizedModelValue.value = removeOption(normalizedModelValue.value, normalizedModelValue.value[0], {
             min: 0,