fix(select): prevent menu from closing when clicking on an option that is no longer in the DOM and adjust focus behavior for multi-select

See #417 and #422

Author: TotomInc

src/Menu.vue

@@ -142,11 +142,14 @@ const handleNavigation = (e: KeyboardEvent) => {
 };
 
 const handleClickOutside = (event: MouseEvent) => {
-  const target = event.target as Node;
+  const target = event.target as HTMLElement;
   const isInsideContainer = sharedData.containerRef.value && sharedData.containerRef.value.contains(target);
   const isInsideMenu = menuRef.value && menuRef.value.contains(target);
+  // This function is called right after clicking on an option. DOM node of the
+  // option is already removed from the DOM, which falsify the check.
+  const isOption = target?.getAttribute?.("role") === "option";
 
-  if (!isInsideContainer && !isInsideMenu) {
+  if (!isInsideContainer && !isInsideMenu && !isOption) {
     sharedData.closeMenu();
   }
 };

src/Select.spec.ts

@@ -280,6 +280,23 @@ describe("multi-select options", () => {
     expect(wrapper.findAll(".menu-option").length).toBe(options.length);
     expect(wrapper.findAll(".multi-value").length).toBe(0);
   });
+
+  it("should focus second-to-last option when selecting the last option (multi-select)", async () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: [], isMulti: true, options, closeOnSelect: false } });
+
+    await openMenu(wrapper);
+
+    const lastOption = wrapper.findAll("div[role='option']")[options.length - 1];
+
+    if (!lastOption) {
+      throw new Error("Last option not found.");
+    }
+
+    await lastOption.trigger("click");
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.get(".focused[role='option']").text()).toBe(options[1]?.label);
+  });
 });
 
 describe("option-deselected event", () => {
@@ -828,6 +845,35 @@ describe("menu closing behavior", () => {
     await wrapper.get("input").trigger("mousedown");
     expect(wrapper.findAll("div[role='option']").length).toBe(2);
   });
+
+  it("should not close menu when click target is an option node no longer in DOM (isMulti=true + closeOnSelect=false)", async () => {
+    const wrapper = mount(VueSelect, {
+      props: { modelValue: [], isMulti: true, options, closeOnSelect: false, hideSelectedOptions: true },
+      attachTo: document.body,
+    });
+
+    await openMenu(wrapper);
+    expect(wrapper.findAll("div[role='option']").length).toBe(options.length);
+
+    const lastOption = wrapper.findAll("div[role='option']")[options.length - 1];
+    if (!lastOption?.element) {
+      throw new Error("Last option element not found.");
+    }
+
+    lastOption.trigger("click");
+    await wrapper.vm.$nextTick();
+
+    const optionOutsideSelect = document.createElement("div");
+    optionOutsideSelect.setAttribute("role", "option");
+    document.body.appendChild(optionOutsideSelect);
+    optionOutsideSelect.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find(".menu").exists()).toBe(true);
+
+    document.body.removeChild(optionOutsideSelect);
+    wrapper.unmount();
+  });
 });
 
 describe("hideSelectedOptions prop", () => {

src/Select.vue

@@ -196,14 +196,22 @@ const setOption = (option: GenericOption) => {
 
   if (props.isMulti) {
     if (Array.isArray(selected.value)) {
-      const isAlreadyPresent = selected.value.find((v) => v === option.value);
+      const isAlreadySelected = !!selected.value.find((v) => v === option.value);
+      const indexInMenu = availableOptions.value.findIndex((v) => v.value === option.value);
+      const isLastIndexInMenu = indexInMenu >= availableOptions.value.length - 1;
 
-      if (!isAlreadyPresent) {
+      if (!isAlreadySelected) {
         selected.value = [...selected.value, option.value];
       }
       else {
         selected.value = selected.value.filter((v) => v !== option.value);
       }
+
+      // When selecting the last option, reset focused option to the second last option.
+      // Avoids an issue where no focused option is available when clicking on the last option.
+      if (isLastIndexInMenu) {
+        focusedOption.value = availableOptions.value.length - 2;
+      }
     }
     else {
       selected.value = [option.value];