- bind scope to open-indicator-icon slot (sagalbot#860)

sagalbot · web-flow · commit eb2f8f835c78 · 2019-04-28T16:09:48.000-07:00
- explicitly set v-if on OpenIndicator
- only add searching and searchable state classes if noDrop is false
- only add OpenIndicator to toggleTargets if the $ref exists
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -40,8 +40,8 @@
           <component :is="childComponents.Deselect" />
         </button>
 
-        <slot name="open-indicator-icon">
-          <component :is="childComponents.OpenIndicator" v-bind="scope.openIndicator.attributes"/>
+        <slot name="open-indicator-icon" v-bind="scope.openIndicator">
+          <component :is="childComponents.OpenIndicator" v-if="!noDrop" v-bind="scope.openIndicator.attributes"/>
         </slot>
 
         <slot name="spinner" v-bind="scope.spinner">
@@ -562,11 +562,16 @@
           this.$el,
           this.searchEl,
           this.$refs.toggle.$el,
-          this.$refs.openIndicator.$el,
-          // the line below is a bit gross, but required to support IE11 without adding polyfills
-          ...Array.prototype.slice.call(this.$refs.openIndicator.$el.childNodes)
         ];
 
+        if (typeof this.$refs.openIndicator !== 'undefined') {
+          toggleTargets.push(
+            this.$refs.openIndicator.$el,
+            // the line below is a bit gross, but required to support IE11 without adding polyfills
+            ...Array.prototype.slice.call(this.$refs.openIndicator.$el.childNodes),
+          );
+        }
+
         if (toggleTargets.indexOf(target) > -1 || target.classList.contains('vs__selected')) {
           if (this.open) {
             this.searchEl.blur(); // dropdown will close on blur
@@ -890,7 +895,6 @@
           },
           openIndicator: {
             attributes: {
-              'v-if': !this.noDrop,
               'ref': 'openIndicator',
               'role': 'presentation',
               'class': 'vs__open-indicator',
@@ -921,8 +925,8 @@
         return {
           'vs--open': this.dropdownOpen,
           'vs--single': !this.multiple,
-          'vs--searching': this.searching,
-          'vs--searchable': this.searchable,
+          'vs--searching': this.searching && !this.noDrop,
+          'vs--searchable': this.searchable && !this.noDrop,
           'vs--unsearchable': !this.searchable,
           'vs--loading': this.mutableLoading,
           'vs--disabled': this.disabled
diff --git a/tests/unit/Dropdown.spec.js b/tests/unit/Dropdown.spec.js
@@ -1,4 +1,5 @@
 import { selectWithProps } from "../helpers";
+import OpenIndicator from "../../src/components/OpenIndicator";
 
 describe("Toggling Dropdown", () => {
   it("should not open the dropdown when the el is clicked but the component is disabled", () => {
@@ -127,4 +128,40 @@ describe("Toggling Dropdown", () => {
     Select.vm.open = true;
     expect(Select.vm.stateClasses['vs--open']).toEqual(true);
   });
+
+  it("should not display the dropdown if noDrop is true", () => {
+    const Select = selectWithProps({
+      noDrop: true,
+    });
+
+    Select.vm.toggleDropdown({ target: Select.vm.$refs.search });
+    expect(Select.vm.open).toEqual(true);
+    expect(Select.contains('.vs__dropdown-menu')).toBeFalsy();
+    expect(Select.vm.stateClasses['vs--open']).toBeFalsy();
+  });
+
+  it("should hide the open indicator if noDrop is true", () => {
+    const Select = selectWithProps({
+      noDrop: true,
+    });
+    expect(Select.contains(OpenIndicator)).toBeFalsy();
+  });
+
+  it("should not add the searchable state class when noDrop is true", () => {
+    const Select = selectWithProps({
+      noDrop: true,
+    });
+    expect(Select.classes('vs--searchable')).toBeFalsy();
+  });
+
+  it("should not add the searching state class when noDrop is true", () => {
+    const Select = selectWithProps({
+      noDrop: true,
+    });
+
+    Select.vm.search = 'Canada';
+
+    expect(Select.classes('vs--searching')).toBeFalsy();
+  });
+
 });
