diff --git a/src/components/Select.vue b/src/components/Select.vue
index db63ef3..18137fb 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -40,8 +40,8 @@
-
-
+
+
@@ -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
index e755ef2..58b01e2 100755
--- 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();
+ });
+
});