V3 - Remove mutable class properties plus other misc changes (#781)

* Remove the mutableValue prop in the Select component.

* Add back mutable value when Vue Select has to manage its own value.

* Remove mutableOptions, valueAsAarray. Update webpack minifer to use Terser.

* Fix tabbing

* Fix bug with showClearButton

* Fix tests.

* Call clearSelection when possible

* Update dev sandbox to have all three options for setting value.

* Update dev sandbox to display current value

* Remove unused karma test setup.

* Revert onInput name change.

* Use coveralls

* Change this.internalValue to this.$data._value.

* Remove onInput prop and replace with internal method, updateValue.

* Update tests.

* Rename optionObjectComparator to optionComparator.

tests/unit/Deselecting.spec.js

@@ -2,10 +2,12 @@ import { selectWithProps } from "../helpers";
 
 describe("Removing values", () => {
   it("can remove the given tag when its close icon is clicked", () => {
-    const Select = selectWithProps({ multiple: true, value: ["foo"] });
+    const Select = selectWithProps({ multiple: true });
+    Select.vm.$data._value = 'one';
 
     Select.find(".vs__deselect").trigger("click");
-    expect(Select.vm.mutableValue).toEqual([]);
+    expect(Select.emitted().input).toEqual([[[]]]);
+    expect(Select.vm.selectedValue).toEqual([]);
   });
 
   it("should not remove tag when close icon is clicked and component is disabled", () => {
@@ -17,28 +19,32 @@ describe("Removing values", () => {
     });
 
     Select.find(".vs__deselect").trigger("click");
-    expect(Select.vm.mutableValue).toEqual(["one"]);
+    expect(Select.vm.selectedValue).toEqual(["one"]);
   });
 
   it("should remove the last item in the value array on delete keypress when multiple is true", () => {
     const Select = selectWithProps({
       multiple: true,
-      value: ["one", "two"],
       options: ["one", "two", "three"]
     });
 
-    Select.vm.maybeDeleteValue();
-    expect(Select.vm.mutableValue).toEqual(["one"]);
+    Select.vm.$data._value = ["one", "two"];
+
+    Select.find('.vs__search').trigger('keydown.backspace')
+
+    expect(Select.emitted().input).toEqual([[['one']]]);
+    expect(Select.vm.selectedValue).toEqual(["one"]);
   });
 
   it("should set value to null on delete keypress when multiple is false", () => {
     const Select = selectWithProps({
-      value: "one",
       options: ["one", "two", "three"]
     });
 
+    Select.vm.$data._value = 'one';
+
     Select.vm.maybeDeleteValue();
-    expect(Select.vm.mutableValue).toEqual(null);
+    expect(Select.vm.selectedValue).toEqual([]);
   });
 
   describe("Clear button", () => {
@@ -64,12 +70,14 @@ describe("Removing values", () => {
     it("should remove selected value when clicked", () => {
       const Select = selectWithProps({
         options: ["foo", "bar"],
-        value: "foo"
       });
+      Select.vm.$data._value = 'foo';
 
-      expect(Select.vm.mutableValue).toEqual("foo");
+      expect(Select.vm.selectedValue).toEqual(["foo"]);
       Select.find("button.vs__clear").trigger("click");
-      expect(Select.vm.mutableValue).toEqual(null);
+
+      expect(Select.emitted().input).toEqual([[null]]);
+      expect(Select.vm.selectedValue).toEqual([]);
     });
 
     it("should be disabled when component is disabled", () => {

tests/unit/Dropdown.spec.js

@@ -59,11 +59,6 @@ describe("Toggling Dropdown", () => {
       multiple: true,
       closeOnSelect: false
     });
-    // const vm = new Vue({
-    //   template:
-    //     '<div><v-select ref="select" :options="options" multiple :closeOnSelect="false" :value="value"></v-select></div>',
-    //   components: { vSelect },
-    // }).$mount();
 
     Select.vm.open = true;
     Select.vm.select("one");
@@ -120,7 +115,7 @@ describe("Toggling Dropdown", () => {
     });
 
     Select.vm.search = "foo";
-    Select.vm.onEscape();
+    Select.find('.vs__search').trigger('keyup.esc')
     expect(Select.vm.search).toEqual("");
   });
 

tests/unit/Filtering.spec.js

@@ -2,6 +2,17 @@ import { shallowMount } from "@vue/test-utils";
 import VueSelect from "../../src/components/Select";
 
 describe("Filtering Options", () => {
+  it("should update the search value when the input element receives the 'input' event", () => {
+    const Select = shallowMount(VueSelect, {
+      propsData: { options: ["foo", "bar", "baz"] }
+    });
+    
+    const input = Select.find('.vs__search');
+    input.element.value = 'a'
+    input.trigger('input')
+    expect(Select.vm.search).toEqual('a');
+  });
+
   it("should filter an array of strings", () => {
     const Select = shallowMount(VueSelect, {
       propsData: { options: ["foo", "bar", "baz"] }

tests/unit/Labels.spec.js

@@ -36,7 +36,7 @@ describe("Labels", () => {
     });
 
     expect(Select.vm.searchPlaceholder).toEqual("foo");
-    Select.vm.mutableValue = "one";
+    Select.vm.$data._value = "one";
     expect(Select.vm.searchPlaceholder).not.toBeDefined();
   });
 });

tests/unit/ObjectIndex.spec.js

@@ -10,7 +10,7 @@ describe("When index prop is defined", () => {
         options: [{ label: "This is Foo", value: "foo" }]
       }
     });
-    expect(Select.vm.mutableValue).toEqual("foo");
+    expect(Select.vm.selectedValue).toEqual(["foo"]);
   });
 
   it("can determine if an object is pre-selected", () => {
@@ -66,7 +66,7 @@ describe("When index prop is defined", () => {
       }
     });
 
-    expect(Select.vm.mutableValue).toEqual(["foo", "bar"]);
+    expect(Select.vm.selectedValue).toEqual(["foo", "bar"]);
   });
 
   it("can deselect a pre-selected object", () => {
@@ -74,7 +74,6 @@ describe("When index prop is defined", () => {
       propsData: {
         multiple: true,
         index: "value",
-        value: ["foo", "bar"],
         options: [
           { label: "This is Foo", value: "foo" },
           { label: "This is Bar", value: "bar" }
@@ -82,16 +81,16 @@ describe("When index prop is defined", () => {
       }
     });
 
+    Select.vm.$data._value = ['foo', 'bar'];
+
     Select.vm.deselect("foo");
-    expect(Select.vm.mutableValue.length).toEqual(1);
-    expect(Select.vm.mutableValue).toEqual(["bar"]);
+    expect(Select.vm.selectedValue).toEqual(["bar"]);
   });
 
   it("can deselect an option when multiple is false", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
         index: "value",
-        value: "foo",
         options: [
           { label: "This is Foo", value: "foo" },
           { label: "This is Bar", value: "bar" }
@@ -100,7 +99,7 @@ describe("When index prop is defined", () => {
     });
 
     Select.vm.deselect("foo");
-    expect(Select.vm.mutableValue).toEqual(null);
+    expect(Select.vm.selectedValue).toEqual([]);
   });
 
   it("can use v-model syntax for a two way binding to a parent component", () => {
@@ -120,7 +119,7 @@ describe("When index prop is defined", () => {
     const Select = Parent.vm.$children[0];
 
     expect(Select.value).toEqual("foo");
-    expect(Select.mutableValue).toEqual("foo");
+    expect(Select.selectedValue).toEqual(["foo"]);
 
     Select.select({ label: "This is Bar", value: "bar" });
     expect(Parent.vm.value).toEqual("bar");

tests/unit/ReactiveOptions.spec.js

@@ -4,17 +4,23 @@ import VueSelect from "../../src/components/Select";
 describe("Reset on options change", () => {
   it("should not reset the selected value by default when the options property changes", () => {
     const Select = shallowMount(VueSelect, {
-      propsData: { value: "one", options: ["one"] }
+      propsData: { options: ["one"] }
     });
-    Select.vm.mutableOptions = ["four", "five", "six"];
-    expect(Select.vm.mutableValue).toEqual("one");
+
+    Select.vm.$data._value = 'one';
+
+    Select.setProps({options: ["four", "five", "six"]});
+    expect(Select.vm.selectedValue).toEqual(["one"]);
   });
 
   it("should reset the selected value when the options property changes", () => {
     const Select = shallowMount(VueSelect, {
-      propsData: { resetOnOptionsChange: true, value: "one", options: ["one"] }
+      propsData: { resetOnOptionsChange: true, options: ["one"] }
     });
-    Select.vm.mutableOptions = ["four", "five", "six"];
-    expect(Select.vm.mutableValue).toEqual(null);
+
+    Select.vm.$data._value = 'one';
+
+    Select.setProps({options: ["four", "five", "six"]});
+    expect(Select.vm.selectedValue).toEqual([]);
   });
 });

tests/unit/Selecting.spec.js

@@ -15,7 +15,7 @@ describe("VS - Selecting Values", () => {
     const Select = shallowMount(VueSelect, {
       propsData: defaultProps
     });
-    expect(Select.mutableValue).toEqual(Select.value);
+    expect(Select.selectedValue).toEqual(Select.value);
   });
 
   it("can accept an array of objects and pre-selected value (single)", () => {
@@ -28,7 +28,7 @@ describe("VS - Selecting Values", () => {
         ]
       }
     });
-    expect(Select.mutableValue).toEqual(Select.value);
+    expect(Select.selectedValue).toEqual(Select.value);
   });
 
   it("can accept an array of objects and pre-selected values (multiple)", () => {
@@ -46,7 +46,7 @@ describe("VS - Selecting Values", () => {
       multiple: true
     });
 
-    expect(Select.mutableValue).toEqual(Select.value);
+    expect(Select.selectedValue).toEqual(Select.value);
   });
 
   it("can select an option on tab", () => {
@@ -67,10 +67,6 @@ describe("VS - Selecting Values", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
         multiple: true,
-        value: [
-          { label: "This is Foo", value: "foo" },
-          { label: "This is Bar", value: "bar" }
-        ],
         options: [
           { label: "This is Foo", value: "foo" },
           { label: "This is Bar", value: "bar" }
@@ -78,36 +74,41 @@ describe("VS - Selecting Values", () => {
       }
     });
 
+    Select.vm.$data._value = [
+      { label: "This is Foo", value: "foo" },
+      { label: "This is Bar", value: "bar" }
+    ];
+
     Select.vm.deselect({ label: "This is Foo", value: "foo" });
-    expect(Select.vm.mutableValue.length).toEqual(1);
+    expect(Select.vm.selectedValue).toEqual([{ label: "This is Bar", value: "bar" }]);
   });
 
   it("can deselect a pre-selected string", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
         multiple: true,
-        value: ["foo", "bar"],
         options: ["foo", "bar"]
       }
     });
+
+    Select.vm.$data._value = "foo";
+
     Select.vm.deselect("foo");
-    expect(Select.vm.mutableValue.length).toEqual(1);
+    expect(Select.vm.selectedValue).toEqual([]);
   });
 
   it("can deselect an option when multiple is false", () => {
-    const Select = shallowMount(VueSelect, {
-      propsData: {
-        value: "foo"
-      }
-    });
+    const Select = shallowMount(VueSelect);
+
+    Select.vm.$data._value = "foo";
+
     Select.vm.deselect("foo");
-    expect(Select.vm.mutableValue).toEqual(null);
+    expect(Select.vm.selectedValue).toEqual([]);
   });
 
   it("can determine if the value prop is empty", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
-        value: [],
         options: ["one", "two", "three"]
       }
     });
@@ -134,19 +135,16 @@ describe("VS - Selecting Values", () => {
   it("should reset the selected values when the multiple property changes", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
-        value: ["one"],
         multiple: true,
         options: ["one", "two", "three"]
       }
     });
 
-    expect(Select.vm.mutableValue).toEqual(["one"]);
-
     Select.setProps({ multiple: false });
-    expect(Select.vm.mutableValue).toEqual(null);
+    expect(Select.vm.selectedValue).toEqual([]);
 
     Select.setProps({ multiple: true });
-    expect(Select.vm.mutableValue).toEqual([]);
+    expect(Select.vm.selectedValue).toEqual([]);
   });
 
   it("can retain values present in a new array of options", () => {
@@ -158,7 +156,7 @@ describe("VS - Selecting Values", () => {
     });
 
     Select.setProps({ options: ["one", "five", "six"] });
-    expect(Select.vm.mutableValue).toEqual(["one"]);
+    expect(Select.vm.selectedValue).toEqual(["one"]);
   });
 
   it("can determine if an object is already selected", () => {
@@ -181,7 +179,7 @@ describe("VS - Selecting Values", () => {
     const Select = Parent.vm.$children[0];
 
     expect(Select.value).toEqual("foo");
-    expect(Select.mutableValue).toEqual("foo");
+    expect(Select.selectedValue).toEqual(["foo"]);
 
     Select.select("bar");
     expect(Parent.vm.value).toEqual("bar");

tests/unit/Tagging.spec.js

@@ -44,25 +44,24 @@ describe("When Tagging Is Enabled", () => {
     const Select = selectWithProps({
       taggable: true,
       multiple: true,
-      value: ["one"],
       options: ["one", "two"]
     });
 
     searchSubmit(Select, "three");
-    expect(Select.vm.mutableValue).toEqual(["one", "three"]);
+
+    expect(Select.vm.selectedValue).toEqual(["three"]);
   });
 
   it("can select the current search text as an object", () => {
     const Select = selectWithProps({
       taggable: true,
       multiple: true,
-      value: [{ label: "one" }],
       options: [{ label: "one" }]
     });
 
     searchSubmit(Select, "two");
-    expect(Select.vm.mutableValue).toEqual([
-      { label: "one" },
+
+    expect(Select.vm.selectedValue).toEqual([
       { label: "two" }
     ]);
   });
@@ -77,7 +76,8 @@ describe("When Tagging Is Enabled", () => {
     });
 
     searchSubmit(Select, "three");
-    expect(Select.vm.mutableOptions).toEqual(["one", "two", "three"]);
+    expect(Select.vm.pushedTags).toEqual(["three"]);
+    expect(Select.vm.optionList).toEqual(["one", "two", "three"]);
   });
 
   it("should add a freshly created option/tag to the options list when pushTags is true and filterable is false", () => {
@@ -91,7 +91,8 @@ describe("When Tagging Is Enabled", () => {
     });
 
     searchSubmit(Select, "three");
-    expect(Select.vm.mutableOptions).toEqual(["one", "two", "three"]);
+    expect(Select.vm.pushedTags).toEqual(["three"]);
+    expect(Select.vm.optionList).toEqual(["one", "two", "three"]);
     expect(Select.vm.filteredOptions).toEqual(["one", "two", "three"]);
   });
 
@@ -105,7 +106,7 @@ describe("When Tagging Is Enabled", () => {
     });
 
     searchSubmit(Select, "three");
-    expect(Select.vm.mutableOptions).toEqual(["one", "two"]);
+    expect(Select.vm.optionList).toEqual(["one", "two"]);
   });
 
   it("wont add a freshly created option/tag to the options list when pushTags is false and filterable is false", () => {
@@ -119,16 +120,15 @@ describe("When Tagging Is Enabled", () => {
     });
 
     searchSubmit(Select, "three");
-    expect(Select.vm.mutableOptions).toEqual(["one", "two"]);
+    expect(Select.vm.optionList).toEqual(["one", "two"]);
     expect(Select.vm.filteredOptions).toEqual(["one", "two"]);
   });
 
-  it("should select an existing option if the search string matches a string from options", () => {
+  it("should select an existing option if the search string matches a string from options", async () => {
     let two = "two";
     const Select = selectWithProps({
       taggable: true,
       multiple: true,
-      value: null,
       options: ["one", two]
     });
 
@@ -136,7 +136,7 @@ describe("When Tagging Is Enabled", () => {
 
     searchSubmit(Select);
 
-    expect(Select.vm.mutableValue[0]).toBe(two);
+    expect(Select.vm.selectedValue).toEqual([two]);
   });
 
   it("should select an existing option if the search string matches an objects label from options", () => {
@@ -149,7 +149,7 @@ describe("When Tagging Is Enabled", () => {
     Select.vm.search = "two";
 
     searchSubmit(Select);
-    expect(Select.vm.mutableValue.label).toBe(two.label);
+    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", () => {
@@ -163,7 +163,7 @@ describe("When Tagging Is Enabled", () => {
     Select.vm.search = "two";
 
     searchSubmit(Select);
-    expect(Select.vm.mutableValue.label).toBe(two.label);
+    expect(Select.vm.selectedValue).toEqual([two]);
   });
 
   it("should not reset the selected value when the options property changes", () => {
@@ -174,8 +174,8 @@ describe("When Tagging Is Enabled", () => {
       options: [{ label: "one" }]
     });
 
-    Select.vm.mutableOptions = [{ label: "two" }];
-    expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
+    Select.setProps({ options: [{ label: "two" }] });
+    expect(Select.vm.selectedValue).toEqual([{ label: "one" }]);
   });
 
   it("should not reset the selected value when the options property changes when filterable is false", () => {
@@ -187,8 +187,8 @@ describe("When Tagging Is Enabled", () => {
       options: [{ label: "one" }]
     });
 
-    Select.vm.mutableOptions = [{ label: "two" }];
-    expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
+    Select.setProps({ options: [{ label: "two" }] });
+    expect(Select.vm.selectedValue).toEqual([{ label: "one" }]);
   });
 
   it("should not allow duplicate tags when using string options", () => {
@@ -198,11 +198,11 @@ describe("When Tagging Is Enabled", () => {
     });
 
     searchSubmit(Select, "one");
-    expect(Select.vm.mutableValue).toEqual(["one"]);
+    expect(Select.vm.selectedValue).toEqual(["one"]);
     expect(Select.vm.search).toEqual("");
 
     searchSubmit(Select, "one");
-    expect(Select.vm.mutableValue).toEqual(["one"]);
+    expect(Select.vm.selectedValue).toEqual(["one"]);
     expect(Select.vm.search).toEqual("");
   });
 
@@ -214,11 +214,11 @@ describe("When Tagging Is Enabled", () => {
     });
 
     searchSubmit(Select, "one");
-    expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
+    expect(Select.vm.selectedValue).toEqual([{ label: "one" }]);
     expect(Select.vm.search).toEqual("");
 
     searchSubmit(Select, "one");
-    expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
+    expect(Select.vm.selectedValue).toEqual([{ label: "one" }]);
     expect(Select.vm.search).toEqual("");
   });
 });