Merge branch 'master' into 975-dropdown-option-slot-overhaul

.github/CONTRIBUTING.md

@@ -0,0 +1,13 @@
+## Pull Requests 
+
+Looks like you want to help out on vue-select.. awesome! Here's a few things to keep in mind when contributing.
+
+- Vue Select uses semantic release to automate the release process. This means that good commit
+ messages are critical. If you're unfamiliar with [conventional changelog](https://github.com
+ /ajoslin/conventional-changelog) you can run `yarn commit` to generate a commit message.
+- It's almost always better to ask before you jump into a PR if you want to add new functionality
+. It's not fun for anyone when you spend time on something that doesn't end up in the component. 
+- If your PR fixes or references an open issue, be sure to reference it in your message.
+- If you're adding new functionality, make sure your code has good test coverage.
+
+:tada: Thanks for contributing, and an even bigger thanks for reading these guidelines! 

.github/workflows/release.yml

@@ -0,0 +1,28 @@
+name: Release
+on:
+  push:
+    branches:
+      - master
+jobs:
+  release:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Test with Coverage
+        run: yarn test
+
+      - name: Build
+        run: yarn build
+
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

.github/workflows/test.yml

@@ -0,0 +1,38 @@
+name: Test & Build
+on: [pull_request]
+jobs:
+  test:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Test with Coverage
+        run: yarn test --coverage --coverageReporters=lcov
+
+      - name: Report Coverage
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+  build:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Bundlewatch
+        run: npx bundlewatch

.travis.yml

@@ -1,9 +0,0 @@
-language: node_js
-cache: yarn
-
-node_js:
-  - "8"
-
-script:
-  - yarn test --coverage --coverageReporters=text-lcov | coveralls
-  - yarn build && bundlewatch --max-size 20kb ./dist/!(*.map)

CONTRIBUTING.md

@@ -1,10 +0,0 @@
-## Pull Requests 
-
-Looks like you want to help out on vue-select.. awesome! Here's a few things to keep in mind when contributing.
-
-1. If your PR contains multiple commits, try to keep those commits succinct, with descriptive messages. This makes it easier to understand your thought process.
-2. **Don't run the build** before submitting. The build is only run and committed immediately before a new release. 
-3. If your PR fixes or references an open issue, be sure to reference it in your message.
-4. If you're adding new functionality, make sure your code has good test coverage.
-
-:tada: Thanks for contributing, and an even bigger thanks for reading these guidelines! 

docs/api/props.md

@@ -120,6 +120,19 @@ clearSearchOnSelect: {
 },
 ```
 
+## clearSearchOnBlur
+
+Enables/disables clearing the search text when the search input is blurred.
+
+```js
+clearSearchOnBlur: {
+    type: Function,
+    default: function ({ clearSearchOnSelect, multiple }) {
+      return clearSearchOnSelect && !multiple
+    }
+},
+```
+
 ## closeOnSelect
 
 Close a dropdown when an option is chosen. Set to false to keep the dropdown

docs/guide/accessibility.md

@@ -2,7 +2,7 @@ Vue Select aims to follow the WAI-ARIA best practices for the
 [combobox](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox) and 
 [listbox](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox) widgets. 
 
-The UX of the component isdesigned around the HTML `<select>` element, while following the WAI-ARIA 
+The UX of the component is designed around the HTML `<select>` element, while following the WAI-ARIA 
 specifications and best practices for creating accessible components. 
 
 ## Combobox

docs/guide/values.md

@@ -127,7 +127,7 @@ To allow input that's not present within the options, set the `taggable` prop to
 If you want added tags to be pushed to the options array, set `push-tags` to true.
 
 ```html
-<v-select taggable multiple />
+<v-select taggable multiple push-tags />
 ```
 
 <v-select taggable multiple push-tags />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-select",
-  "version": "3.4.0",
+  "version": "3.5.1",
   "description": "Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.",
   "author": "Jeff Sagal <sagalbot@gmail.com>",
   "homepage": "https://vue-select.org",
@@ -18,7 +18,9 @@
     "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js --progress",
     "build:docs": "cd docs && yarn build",
     "build:preview": "cd docs && yarn build",
-    "test": "jest"
+    "test": "jest",
+    "semantic-release": "semantic-release",
+    "commit": "git-cz"
   },
   "repository": {
     "type": "git",
@@ -35,16 +37,19 @@
     "@babel/plugin-transform-runtime": "^7.4.0",
     "@babel/preset-env": "^7.4.2",
     "@babel/runtime": "^7.4.2",
-    "@vue/test-utils": "^1.0.0-beta.29",
+    "@semantic-release/git": "^9.0.0",
+    "@vue/test-utils": "^1.0.0-beta.31",
     "autoprefixer": "^9.4.7",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.5",
     "bundlewatch": "^0.2.5",
     "chokidar": "^2.1.5",
+    "commitizen": "^4.0.3",
     "coveralls": "^3.0.2",
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.0",
     "cssnano": "^4.1.10",
+    "cz-conventional-changelog": "3.1.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.1.0",
@@ -55,6 +60,7 @@
     "postcss-loader": "^3.0.0",
     "postcss-scss": "^2.0.0",
     "sass-loader": "^7.1.0",
+    "semantic-release": "^17.0.4",
     "terser-webpack-plugin": "^1.2.3",
     "url-loader": "^1.1.2",
     "vue": "^2.6.10",
@@ -99,8 +105,26 @@
       "!**/node_modules/**"
     ],
     "coverageReporters": [
-      "html",
+      "text"
-      "text-summary"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "bundlewatch": {
+    "files": [
+      {
+        "path": "./dist/vue-select.js",
+        "compression": "none",
+        "maxSize": "21 KB"
+      },
+      {
+        "path": "./dist/vue-select.css",
+        "compression": "none",
+        "maxSize": "6 KB"
+      }
     ]
   }
 }

release.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  release: {
+    branch: "master"
+  },
+  plugins: [
+    "@semantic-release/npm",
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/git",
+      {
+        assets: ["package.json"],
+        message: "chore(🚀): ${nextRelease.version}"
+      }
+    ]
+  ]
+};

src/components/Select.vue

@@ -488,6 +488,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}
@@ -889,7 +900,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()
@@ -1053,7 +1065,7 @@
               'ref': 'search',
               'role': 'combobox',
               'type': 'search',
-              'autocomplete': 'off',
+              'autocomplete': this.autocomplete,
               'value': this.search,
             },
             events: {
@@ -1138,14 +1150,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

src/scss/global/_animations.scss

@@ -23,6 +23,7 @@ $transition-duration: .15s;
 /* Dropdown Default Transition */
 .vs__fade-enter-active,
 .vs__fade-leave-active {
+  pointer-events: none;
   transition: opacity $transition-duration $transition-timing-function;
 }
 .vs__fade-enter,

tests/unit/Ajax.spec.js

@@ -13,10 +13,11 @@ describe("Asynchronous Loading", () => {
     expect(Select.vm.mutableLoading).toEqual(true);
   });
 
-  it("should trigger the search event when the search text changes", () => {
+  it("should trigger the search event when the search text changes", async () => {
     const Select = selectWithProps();
 
     Select.vm.search = "foo";
+    await Select.vm.$nextTick();
 
     const events = Select.emitted("search");
 
@@ -24,11 +25,13 @@ describe("Asynchronous Loading", () => {
     expect(events.length).toEqual(1);
   });
 
-  it("should trigger the search event if the search text is empty", () => {
+  it("should trigger the search event if the search text is empty", async () => {
     const Select = selectWithProps();
 
     Select.vm.search = "foo";
+    await Select.vm.$nextTick();
     Select.vm.search = "";
+    await Select.vm.$nextTick();
 
     const events = Select.emitted("search");
 
@@ -36,7 +39,7 @@ describe("Asynchronous Loading", () => {
     expect(events.length).toEqual(2);
   });
 
-  it("can set loading to false from the @search event callback", () => {
+  it("can set loading to false from the @search event callback", async () => {
     const Select = shallowMount(vSelect, {
       listeners: {
         search: (search, loading) => {
@@ -47,13 +50,16 @@ describe("Asynchronous Loading", () => {
 
     Select.vm.mutableLoading = true;
     Select.vm.search = 'foo';
+    await Select.vm.$nextTick();
 
     expect(Select.vm.mutableLoading).toEqual(false);
   });
 
-  it("will sync mutable loading with the loading prop", () => {
+  it('will sync mutable loading with the loading prop', async () => {
     const Select = selectWithProps({ loading: false });
     Select.setProps({ loading: true });
+    await Select.vm.$nextTick();
+
     expect(Select.vm.mutableLoading).toEqual(true);
   });
 });

tests/unit/Labels.spec.js

@@ -12,13 +12,15 @@ describe("Labels", () => {
     expect(Select.find(".vs__selected").text()).toBe("Foo");
   });
 
-  it("will console.warn when options contain objects without a valid label key", () => {
+  it("will console.warn when options contain objects without a valid label key", async () => {
     const spy = jest.spyOn(console, "warn").mockImplementation(() => {});
     const Select = selectWithProps({
       options: [{}]
     });
 
     Select.vm.open = true;
+    await Select.vm.$nextTick();
+
     expect(spy).toHaveBeenCalledWith(
       '[vue-select warn]: Label key "option.label" does not exist in options object {}.' +
         "\nhttps://vue-select.org/api/props.html#getoptionlabel"

tests/unit/ReactiveOptions.spec.js

@@ -31,20 +31,21 @@ describe("Reset on options change", () => {
       expect(spy.mock.calls[3][0]).toContain('Invalid prop: custom validator check failed for prop "resetOnOptionsChange"')
     });
 
-    it('should receive the new options, old options, and current value', () => {
+    it('should receive the new options, old options, and current value', async () => {
       let resetOnOptionsChange = jest.fn(option => option);
       const Select = mountDefault(
         {resetOnOptionsChange, options: ['bear'], value: 'selected'},
       );
 
       Select.setProps({options: ['lake', 'kite']});
+      await Select.vm.$nextTick();
 
       expect(resetOnOptionsChange).toHaveBeenCalledTimes(1);
       expect(resetOnOptionsChange)
         .toHaveBeenCalledWith(['lake', 'kite'], ['bear'], ['selected']);
     });
 
-    it('should allow resetOnOptionsChange to be a function that returns true', () => {
+    it('should allow resetOnOptionsChange to be a function that returns true', async () => {
       let resetOnOptionsChange = () => true;
       const Select = shallowMount(VueSelect, {
         propsData: {resetOnOptionsChange, options: ['one'], value: 'one'},
@@ -52,6 +53,8 @@ describe("Reset on options change", () => {
       const spy = jest.spyOn(Select.vm, 'clearSelection');
 
       Select.setProps({options: ['one', 'two']});
+      await Select.vm.$nextTick();
+
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
@@ -74,14 +77,18 @@ describe("Reset on options change", () => {
       const spy = jest.spyOn(Select.vm, 'clearSelection');
 
       Select.setProps({options: ['one', 'two']});
+      await Select.vm.$nextTick();
+
       expect(Select.vm.selectedValue).toEqual(['one']);
 
       Select.setProps({options: ['two']});
+      await Select.vm.$nextTick();
+
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });
 
-  it("should reset the selected value when the options property changes", () => {
+  it("should reset the selected value when the options property changes", async () => {
     const Select = shallowMount(VueSelect, {
       propsData: { resetOnOptionsChange: true, options: ["one"] }
     });
@@ -89,15 +96,46 @@ describe("Reset on options change", () => {
     Select.vm.$data._value = 'one';
 
     Select.setProps({options: ["four", "five", "six"]});
+    await Select.vm.$nextTick();
+
     expect(Select.vm.selectedValue).toEqual([]);
   });
 
-  it("should return correct selected value when the options property changes and a new option matches", () => {
+  it("should return correct selected value when the options property changes and a new option matches", async () => {
     const Select = shallowMount(VueSelect, {
       propsData: { value: "one", options: [], reduce(option) { return option.value } }
     });
 
     Select.setProps({options: [{ label: "oneLabel", value: "one" }]});
+    await Select.vm.$nextTick();
+
     expect(Select.vm.selectedValue).toEqual([{ label: "oneLabel", value: "one" }]);
   });
+
+  it('clearSearchOnBlur returns false when multiple is true', () => {
+    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('clearSearchOnBlur accepts a function', () => {
+    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');
+  });
 });

tests/unit/Reduce.spec.js

@@ -211,7 +211,7 @@ describe("When reduce prop is defined", () => {
 
   });
 
-  it("reacts correctly when value property changes", () => {
+  it("reacts correctly when value property changes", async () => {
     const optionToChangeTo = { id: 1, label: "Foo" };
     const Select = shallowMount(VueSelect, {
       propsData: {
@@ -222,6 +222,7 @@ describe("When reduce prop is defined", () => {
     });
 
     Select.setProps({ value: optionToChangeTo.id });
+    await Select.vm.$nextTick();
 
     expect(Select.vm.selectedValue).toEqual([optionToChangeTo]);
   });

tests/unit/Selectable.spec.js

@@ -1,27 +1,33 @@
 import { selectWithProps } from "../helpers";
 
 describe("Selectable prop", () => {
-  it("should select selectable option if clicked", () => {
+  it("should select selectable option if clicked", async () => {
     const Select = selectWithProps({
       options: ["one", "two", "three"],
       selectable: (option) => option === "one"
     });
 
     Select.vm.$data.open = true;
+    await Select.vm.$nextTick();
 
     Select.find(".vs__dropdown-menu li:first-child").trigger("mousedown");
+
+    await Select.vm.$nextTick();
     expect(Select.vm.selectedValue).toEqual(["one"]);
   })
 
-  it("should not select not selectable option if clicked", () => {
+  it("should not select not selectable option if clicked", async () => {
     const Select = selectWithProps({
       options: ["one", "two", "three"],
       selectable: (option) => option === "one"
     });
 
     Select.vm.$data.open = true;
+    await Select.vm.$nextTick();
 
     Select.find(".vs__dropdown-menu li:last-child").trigger("mousedown");
+    await Select.vm.$nextTick();
+
     expect(Select.vm.selectedValue).toEqual([]);
   });
 

tests/unit/Slots.spec.js

@@ -38,12 +38,14 @@ describe('Scoped Slots', () => {
   });
 
   describe('Slot: option', () => {
-    it('receives an option object in the option slot', () => {
+    it('receives an option object in the option slot', async () => {
       const {vm} = mountDefault(
         {value: 'one', options: ['one']},
         {scopedSlots: {option: receiveProps}},
       );
       vm.open = true;
+
+      await vm.$nextTick();
       expect(receivedSlotProps.label).toEqual('one');
       expect(receivedSlotProps.hasOwnProperty('attributes')).toBeTruthy();
       expect(receivedSlotProps.hasOwnProperty('events')).toBeTruthy();

tests/unit/Tagging.spec.js

@@ -153,7 +153,7 @@ describe("When Tagging Is Enabled", () => {
     expect(Select.vm.selectedValue).toEqual([two]);
   });
 
-  it("should select an existing option if the search string matches an objects label from options", () => {
+  it("should select an existing option if the search string matches an objects label from options", async () => {
     let two = { label: "two" };
     const Select = selectWithProps({
       taggable: true,
@@ -161,12 +161,13 @@ describe("When Tagging Is Enabled", () => {
     });
 
     Select.vm.search = "two";
+    await Select.vm.$nextTick();
 
     searchSubmit(Select);
     expect(Select.vm.selectedValue).toEqual([two]);
   });
 
-  it("should select an existing option if the search string matches an objects label from options when filter-options is false", () => {
+  it("should select an existing option if the search string matches an objects label from options when filter-options is false", async () => {
     let two = { label: "two" };
     const Select = selectWithProps({
       taggable: true,
@@ -175,6 +176,7 @@ describe("When Tagging Is Enabled", () => {
     });
 
     Select.vm.search = "two";
+    await Select.vm.$nextTick();
 
     searchSubmit(Select);
     expect(Select.vm.selectedValue).toEqual([two]);

tests/unit/TypeAhead.spec.js

@@ -120,11 +120,12 @@ describe("Moving the Typeahead Pointer", () => {
   });
 
   describe("Measuring pixel distances", () => {
-    it("should calculate pointerHeight as the offsetHeight of the pointer element if it exists", () => {
+    it("should calculate pointerHeight as the offsetHeight of the pointer element if it exists", async () => {
       const Select = mountDefault();
 
       // Drop down must be open for $refs to exist
       Select.vm.open = true;
+      await Select.vm.$nextTick();
 
       /**
        * Since JSDom doesn't render layouts, set the offsetHeight explicitly