feat: option selection events (#1324)

- `option:selecting` before state is set
- `option:selected` after state is set
- `option:deselecting` before state is set
- `option:deselected` after state is set

Co-authored-by: tiagoroldao <troldao@assurehedge.com>
Co-authored-by: Jeff <sagalbot@gmail.com>

docs/api/events.md

@@ -9,6 +9,38 @@ Triggered when the selected value changes. Used internally for `v-model`.
 this.$emit("input", val);
 ```
 
+## `option:selecting` <Badge text="v3.11.0+" />
+
+Triggered after an option has been selected, <strong>before</strong> updating internal state. 
+
+```js
+this.$emit("option:selecting", selectedOption);
+```
+
+## `option:selected` <Badge text="v3.11.0+" />
+
+Triggered when an option has been selected, <strong>after</strong> updating internal state. 
+
+```js
+this.$emit("option:selected", selectedOption);
+```
+
+## `option:deselecting` <Badge text="v3.11.0+" />
+
+Triggered when an option has been deselected, <strong>before</strong> updating internal state. 
+
+```js
+this.$emit("option:deselecting", selectedOption);
+```
+
+## `option:deselected` <Badge text="v3.11.0+" />
+
+Triggered when an option has been deselected, <strong>after</strong> updating internal state. 
+
+```js
+this.$emit("option:deselected", deselectedOption);
+```
+
 ## `option:created`
 
 Triggered when `taggable` is `true` and a new option has been created.

src/components/Select.vue

@@ -657,6 +657,7 @@
        * @return {void}
        */
       select(option) {
+        this.$emit('option:selecting', option);
         if (!this.isOptionSelected(option)) {
           if (this.taggable && !this.optionExists(option)) {
             this.$emit('option:created', option);
@@ -665,6 +666,7 @@
             option = this.selectedValue.concat(option)
           }
           this.updateValue(option);
+          this.$emit('option:selected', option);
         }
         this.onAfterSelect(option)
       },
@@ -675,9 +677,11 @@
        * @return {void}
        */
       deselect (option) {
+        this.$emit('option:deselecting', option);
         this.updateValue(this.selectedValue.filter(val => {
           return !this.optionComparator(val, option);
         }));
+        this.$emit('option:deselected', option);
       },
 
       /**

tests/unit/Selecting.spec.js

@@ -220,5 +220,84 @@ describe("VS - Selecting Values", () => {
       Select.vm.select("bar");
       expect(Select.emitted("input")[0]).toEqual([["foo", "bar"]]);
     });
+
+    it("will not trigger the input event when multiple is true and selection is repeated", () => {
+      const Select = shallowMount(VueSelect, {
+        propsData: { multiple: true, value: ["foo ", "bar"], options: ["foo", "bar", "baz"] }
+      });
+
+      Select.vm.select("bar");
+      expect(Select.emitted("input")).toBeFalsy();
+    });
+  });
+
+  describe("option:selecting Event", () => {
+    it("will trigger the option:selecting event when an option is selected", () => {
+      const Select = shallowMount(VueSelect);
+      Select.vm.select("bar");
+      expect(Select.emitted("option:selecting")[0]).toEqual(["bar"]);
+    });
+
+    it("will trigger the option:selecting event regardless of current value", () => {
+      const Select = shallowMount(VueSelect, {
+        propsData: { value: ["foo"], options: ["foo", "bar"] }
+      });
+      Select.vm.select("foo");
+      Select.vm.select("bar");
+      expect(Select.emitted("option:selecting")).toEqual([["foo"], ["bar"]]);
+    });
+
+    it("will trigger the option:selecting event with current selected item when multiple is true", () => {
+      const Select = shallowMount(VueSelect, {
+        propsData: { multiple: true, value: ["foo"], options: ["foo", "bar"] }
+      });
+      Select.vm.select("bar");
+      expect(Select.emitted("option:selecting")[0]).toEqual(["bar"]);
+    });
+
+    it("will trigger the option:selecting event regardless of current value when multiple is true", () => {
+      const Select = shallowMount(VueSelect, {
+        propsData: { multiple: true, value: ["foo", "bar"], options: ["foo", "bar"] }
+      });
+      Select.vm.select("bar");
+      Select.vm.select("bar");
+      expect(Select.emitted("option:selecting")).toEqual([["bar"], ["bar"]]);
+    });
+  });
+
+  describe("option:deselected Event", () => {
+    it("will trigger the option:deselected event when an option is deselected", () => {
+      const Select = shallowMount(VueSelect, {
+        propsData: { value: ["foo"], options: ["foo", "bar"] }
+      });
+      Select.vm.deselect("foo");
+      expect(Select.emitted("option:deselected")[0]).toEqual(["foo"]);
+    });
+
+    it("will trigger the option:deselected event regardless of current value", () => {
+      const Select = shallowMount(VueSelect, {
+        propsData: { value: ["foo"], options: ["foo", "bar"] }
+      });
+      Select.vm.deselect("foo");
+      Select.vm.deselect("bar");
+      expect(Select.emitted("option:deselected")).toEqual([["foo"], ["bar"]]);
+    });
+
+    it("will trigger the option:selected event with current selected item when multiple is true", () => {
+      const Select = shallowMount(VueSelect, {
+        propsData: { multiple: true, value: ["foo"], options: ["foo", "bar"] }
+      });
+      Select.vm.deselect("bar");
+      expect(Select.emitted("option:deselected")[0]).toEqual(["bar"]);
+    });
+
+    it("will trigger the option:selected event regardless of current value when multiple is true", () => {
+      const Select = shallowMount(VueSelect, {
+        propsData: { multiple: true, value: ["foo", "bar"], options: ["foo", "bar"] }
+      });
+      Select.vm.deselect("bar");
+      Select.vm.deselect("bar");
+      expect(Select.emitted("option:deselected")).toEqual([["bar"], ["bar"]]);
+    });
   });
 });