Allow user to control the behavior of clearSearchOnBlur. (#1060)

src/components/Select.vue

@@ -425,6 +425,17 @@
         validator: (value) => ['function', 'boolean'].includes(typeof value)
       },
 
+      /**
+       * If search text should clear on blur
+       * @return {Boolean} True when single and clearSearchOnSelect
+       */
+      clearSearchOnBlur: {
+        type: Function,
+        default: function ({ clearSearchOnSelect, multiple }) {
+          return clearSearchOnSelect && !multiple
+        }
+      },
+
       /**
        * Disable the dropdown entirely.
        * @type {Boolean}
@@ -826,7 +837,8 @@
         if (this.mousedown && !this.searching) {
           this.mousedown = false
         } else {
-          if (this.clearSearchOnBlur) {
+          const { clearSearchOnSelect, multiple } = this;
+          if (this.clearSearchOnBlur({ clearSearchOnSelect, multiple })) {
             this.search = ''
           }
           this.closeSearchOptions()
@@ -1033,14 +1045,6 @@
         }
       },
 
-      /**
-       * If search text should clear on blur
-       * @return {Boolean} True when single and clearSearchOnSelect
-       */
-      clearSearchOnBlur() {
-        return this.clearSearchOnSelect && !this.multiple
-      },
-
       /**
        * Return the current state of the
        * search input

tests/unit/ReactiveOptions.spec.js

@@ -100,4 +100,31 @@ describe("Reset on options change", () => {
     Select.setProps({options: [{ label: "oneLabel", value: "one" }]});
     expect(Select.vm.selectedValue).toEqual([{ label: "oneLabel", value: "one" }]);
   });
+
+  it('default behavior when blur search field is to clean it.', () => {
+    const Select = mountDefault({});
+    let clearSearchOnBlur = jest.spyOn(Select.vm, 'clearSearchOnBlur');
+    Select.find({ ref: "search" }).trigger("click");
+    Select.setData({ search: "one" });
+    Select.find({ ref: "search" }).trigger("blur");
+
+    expect(clearSearchOnBlur).toHaveBeenCalledTimes(1);
+    expect(clearSearchOnBlur).toHaveBeenCalledWith({
+      clearSearchOnSelect: true,
+      multiple: false
+    });
+    expect(Select.vm.search).toBe('');
+  });
+
+  it('control behavior when blur search field.', () => {
+    let clearSearchOnBlur = jest.fn(() => false);
+    const Select = mountDefault({clearSearchOnBlur});
+
+    Select.find({ ref: "search" }).trigger("click");
+    Select.setData({ search: "one" });
+    Select.find({ ref: "search" }).trigger("blur");
+
+    expect(clearSearchOnBlur).toHaveBeenCalledTimes(1);
+    expect(Select.vm.search).toBe('one');
+  });
 });