diff --git a/docs/api/props.md b/docs/api/props.md
index cfe3aca..9120826 100644
--- a/docs/api/props.md
+++ b/docs/api/props.md
@@ -521,6 +521,26 @@ selectOnTab: {
}
```
+## shouldNoOptionsSlotDisplay
+
+```js
+/**
+ * Determines whether the no options slot
+ * will be displayed.
+ *
+ * Receives the component instance as the only argument.
+ *
+ * @since v3.13.0
+ * @return boolean
+ */
+shouldNoOptionsSlotDisplay: {
+ type: Function,
+ default({ filteredOptions }) {
+ return filteredOptions.length === 0
+ }
+}
+```
+
## tabindex
diff --git a/src/components/Select.vue b/src/components/Select.vue
index c73b6a7..13472ca 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -70,7 +70,7 @@
{{ getOptionLabel(option) }}
-
+
Sorry, no matching options.
@@ -579,6 +579,22 @@
default({noDrop, open, mutableLoading}) {
return noDrop ? false : open && !mutableLoading;
}
+ },
+
+ /**
+ * Determines whether the no options slot
+ * will be displayed.
+ *
+ * Receives the component instance as the only argument.
+ *
+ * @since v3.13.0
+ * @return boolean
+ */
+ noOptionsSlotShouldDisplay: {
+ type: Function,
+ default({filteredOptions}) {
+ return filteredOptions.length === 0
+ }
}
},
@@ -1200,6 +1216,14 @@
showClearButton() {
return !this.multiple && this.clearable && !this.open && !this.isValueEmpty
},
+
+ /**
+ * Determine if the no options slot should be displayed.
+ * @returns {Boolean}
+ */
+ showNoOptionsSlot() {
+ return !! this.noOptionsSlotShouldDisplay(this)
+ }
},
}
diff --git a/tests/unit/Slots.spec.js b/tests/unit/Slots.spec.js
index 955829b..b439db0 100644
--- a/tests/unit/Slots.spec.js
+++ b/tests/unit/Slots.spec.js
@@ -1,4 +1,4 @@
-import { mountDefault } from '../helpers';
+import { mountDefault, selectWithProps } from '../helpers';
describe('Scoped Slots', () => {
it('receives an option object to the selected-option-container slot', () => {
@@ -74,6 +74,20 @@ describe('Scoped Slots', () => {
})
});
+ test('no options slot can be hidden', async () => {
+ const Select = selectWithProps({
+ noOptionsSlotShouldDisplay: () => false,
+ options: []
+ });
+
+ Select.vm.open = true;
+ await Select.vm.$nextTick();
+
+ expect(Select.classes('vs--open')).toBeTruthy();
+ expect(Select.find('.vs__dropdown-menu li')).toBeTruthy();
+ expect(Select.find('.vs__no-options').exists()).toBeFalsy();
+ });
+
test('header slot props', async () => {
const header = jest.fn();
const Select = mountDefault({}, {