- openIndicator opens dropdown

Jeff · Jeff · commit 078d75031ec5 · 2019-03-02T16:11:59.000-08:00
- improved toggleDropdown function
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "main": "dist/vue-select.js",
   "license": "MIT",
   "scripts": {
-    "start": "npm run dev",
+    "start": "npm run serve",
     "serve": "webpack-dev-server --config build/webpack.dev.conf.js --hot --progress -d",
     "serve:docs": "vuepress dev docs",
     "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js --progress",
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -34,13 +34,15 @@
           :disabled="disabled"
           @click="clearSelection"
           type="button"
-          class="vs__clear"
+          class="vs__clear vs__btn-reset"
           title="Clear selection"
         >
           <deselect />
         </button>
 
-        <open-indicator v-if="!noDrop" ref="openIndicator" role="presentation" class="vs__open-indicator" />
+        <button v-if="!noDrop" ref="openIndicator" role="presentation" class="vs__open-indicator vs__btn-reset">
+          <open-indicator />
+        </button>
 
         <slot name="spinner" v-bind="scope.spinner">
           <div class="vs__spinner" v-show="mutableLoading">Loading...</div>
@@ -591,19 +593,30 @@
 
       /**
        * Toggle the visibility of the dropdown menu.
-       * @param  {Event} e
+       * @param  {MouseEvent} e
        * @return {void}
        */
-      toggleDropdown(e) {
-        if (e.target === this.$refs.openIndicator || e.target === this.searchEl || e.target === this.$refs.toggle ||
-            e.target.classList.contains('vs__selected') || e.target === this.$el) {
+      toggleDropdown (e) {
+        if (this.disabled) {
+          return;
+        }
+
+        const target = e.target;
+
+        const toggleableElements = [
+          this.$refs.openIndicator,
+          this.$refs.toggle,
+          this.searchEl,
+          this.$el,
+        ];
+
+        if (toggleableElements.includes(target) || target.classList.contains('vs__selected') ) {
           if (this.open) {
-            this.searchEl.blur() // dropdown will close on blur
+            // dropdown will close on blur
+            this.searchEl.blur();
           } else {
-            if (!this.disabled) {
-              this.open = true
-              this.searchEl.focus()
-            }
+            this.open = true;
+            this.searchEl.focus();
           }
         }
       },
diff --git a/src/scss/global/_button.scss b/src/scss/global/_button.scss
@@ -0,0 +1,8 @@
+.vs__btn-reset {
+  appearance: none;
+  border: none;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: transparent;
+}
diff --git a/src/scss/modules/_clear.scss b/src/scss/modules/_clear.scss
@@ -2,9 +2,5 @@
 
 .vs__clear {
   fill: $vs-controls-color;
-  padding: 0;
-  border: 0;
-  background-color: transparent;
-  cursor: pointer;
   margin-right: 8px;
 }

Original file line number	Diff line number	Diff line change
`@@ -2,9 +2,5 @@`
`2`	`2`
`3`	`3`	`.vs__clear {`
`4`	`4`	`fill: $vs-controls-color;`
`5`		`- padding: 0;`
`6`		`- border: 0;`
`7`		`- background-color: transparent;`
`8`		`- cursor: pointer;`
`9`	`5`	`margin-right: 8px;`
`10`	`6`	`}`