fix(select): backspace removes last selected option in multi mode

See #296

Author: TotomInc

src/Menu.vue

@@ -102,11 +102,20 @@ const handleNavigation = (e: KeyboardEvent) => {
     if (e.key === "Backspace" && sharedData.search.value.length === 0 && hasSelectedValue) {
       e.preventDefault();
 
-      if (sharedProps.isMulti && Array.isArray(selected.value)) {
-        selected.value = selected.value.slice(0, -1);
+      if (sharedProps.isMulti) {
+        const selectedOptions = sharedData.selectedOptions.value;
+        const lastOption = selectedOptions[selectedOptions.length - 1];
+
+        if (lastOption) {
+          sharedData.removeOption(lastOption);
+        }
       }
       else {
-        selected.value = undefined as OptionValue;
+        const selectedOption = sharedData.selectedOptions.value[0];
+
+        if (selectedOption) {
+          sharedData.removeOption(selectedOption);
+        }
       }
     }
   }

src/Select.spec.ts

@@ -276,6 +276,67 @@ describe("multi-select options", () => {
   });
 });
 
+describe("option-deselected event", () => {
+  it("should emit option-deselected when removing a tag via click in multi-select", async () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: [], isMulti: true, options } });
+
+    await openMenu(wrapper);
+    await wrapper.get("div[role='option']").trigger("click");
+
+    expect(wrapper.emitted("optionDeselected")).toBeUndefined();
+
+    await wrapper.get(".multi-value-remove").trigger("click");
+
+    const emittedEvents = wrapper.emitted("optionDeselected");
+    expect(emittedEvents).toBeDefined();
+    expect(emittedEvents?.[0]?.[0]).toEqual(options[0]);
+  });
+
+  it("should emit option-deselected when removing a tag via backspace in multi-select", async () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: [], isMulti: true, options } });
+
+    await openMenu(wrapper);
+    await wrapper.get("div[role='option']").trigger("click");
+
+    expect(wrapper.emitted("optionDeselected")).toBeUndefined();
+
+    await wrapper.get("input").trigger("mousedown");
+    await dispatchEvent(wrapper, new KeyboardEvent("keydown", { key: "Backspace" }));
+
+    const emittedEvents = wrapper.emitted("optionDeselected");
+    expect(emittedEvents).toBeDefined();
+    expect(emittedEvents?.[0]?.[0]).toEqual(options[0]);
+  });
+
+  it("should emit option-deselected when removing via backspace in single-select", async () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: null, options } });
+
+    await openMenu(wrapper);
+    await wrapper.get("div[role='option']").trigger("click");
+
+    expect(wrapper.emitted("optionDeselected")).toBeUndefined();
+
+    await wrapper.get("input").trigger("mousedown");
+    await dispatchEvent(wrapper, new KeyboardEvent("keydown", { key: "Backspace" }));
+
+    const emittedEvents = wrapper.emitted("optionDeselected");
+    expect(emittedEvents).toBeDefined();
+    expect(emittedEvents?.[0]?.[0]).toEqual(options[0]);
+  });
+
+  it("should emit option-deselected with null when clearing all options in multi-select", async () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: [], isMulti: true, options, isClearable: true } });
+
+    await openMenu(wrapper);
+    await wrapper.get("div[role='option']").trigger("click");
+    await wrapper.get(".clear-button").trigger("click");
+
+    const emittedEvents = wrapper.emitted("optionDeselected");
+    expect(emittedEvents).toBeDefined();
+    expect(emittedEvents?.[0]?.[0]).toBeNull();
+  });
+});
+
 describe("clear button", () => {
   it("should display the clear button when an option is selected", async () => {
     const wrapper = mount(VueSelect, { props: { modelValue: null, options, isClearable: true } });

src/Select.vue

@@ -229,7 +229,11 @@ const setOption = (option: GenericOption) => {
 };
 
 const removeOption = (option: GenericOption) => {
-  if (props.isMulti && !props.isDisabled) {
+  if (props.isDisabled) {
+    return;
+  }
+
+  if (props.isMulti) {
     if (Array.isArray(selected.value)) {
       selected.value = selected.value.filter((value) => value !== props.getOptionValue(option));
       emit("optionDeselected", option);
@@ -238,6 +242,10 @@ const removeOption = (option: GenericOption) => {
       console.warn(`[vue3-select-component warn]: The v-model provided should be an array when using \`isMulti\` prop, instead it was: ${selected.value}`);
     }
   }
+  else {
+    selected.value = undefined as OptionValue;
+    emit("optionDeselected", option);
+  }
 };
 
 const clear = () => {