Add new value 'retain-focus' for prop closeDropdownOnSelect (#318)

* add new value 'retain-focus' for closeDropdownOnSelect (closes #268)

* breaking: rename default `closeDropdownOnSelect` from `desktop` to `if-mobile` for clarity

* document closeDropdownOnSelect: 'retain-focus' in readme

Author: janosh

readme.md

@@ -263,10 +263,10 @@ These are the core props you'll use in most cases:
    Function to determine option equality. Default compares by lowercased label.
 
 1. ```ts
-   closeDropdownOnSelect: boolean | 'desktop' = 'desktop'
+   closeDropdownOnSelect: boolean | 'if-mobile' | 'retain-focus' = 'if-mobile'
    ```
 
-   Whether to close dropdown after selection. `'desktop'` means close on mobile only.
+   Whether to close dropdown after selection. `'if-mobile'` closes dropdown on mobile devices only (responsive). `'retain-focus'` closes dropdown but keeps input focused for rapid typing to create custom options from text input (see `allowUserOptions`).
 
 1. ```ts
    resetFilterOnAdd: boolean = true

src/lib/MultiSelect.svelte

@@ -29,7 +29,7 @@
       if (!searchText) return true
       return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase())
     },
-    closeDropdownOnSelect = `desktop`,
+    closeDropdownOnSelect = `if-mobile`,
     form_input = $bindable(null),
     highlightMatches = true,
     id = null,
@@ -263,10 +263,13 @@
 
       const dropdown_should_close =
         closeDropdownOnSelect === true ||
-        (closeDropdownOnSelect === `desktop` && window_width && window_width < breakpoint)
+        closeDropdownOnSelect === `retain-focus` ||
+        (closeDropdownOnSelect === `if-mobile` && window_width && window_width < breakpoint)
+
+      const should_retain_focus = closeDropdownOnSelect === `retain-focus`
 
       if (reached_max_select || dropdown_should_close) {
-        close_dropdown(event)
+        close_dropdown(event, should_retain_focus)
       } else if (!dropdown_should_close) {
         input?.focus()
       }
@@ -322,9 +325,9 @@
     onopen?.({ event })
   }
 
-  function close_dropdown(event: Event) {
+  function close_dropdown(event: Event, retain_focus = false) {
     open = false
-    input?.blur()
+    if (!retain_focus) input?.blur()
     activeIndex = null
     onclose?.({ event })
   }

src/lib/types.ts

@@ -113,7 +113,7 @@ export interface MultiSelectParameters<T extends Option = Option> {
   // case-insensitive equality comparison after string coercion and looks only at the `label` key of object options by default
   key?: (opt: T) => unknown
   filterFunc?: (opt: T, searchText: string) => boolean
-  closeDropdownOnSelect?: boolean | `desktop`
+  closeDropdownOnSelect?: boolean | `if-mobile` | `retain-focus`
   form_input?: HTMLInputElement | null
   highlightMatches?: boolean
   id?: string | null

tests/unit/MultiSelect.svelte.test.ts

@@ -1551,7 +1551,7 @@ test.each([
   },
 )
 
-test.each([true, false, `desktop`] as const)(
+test.each([true, false, `if-mobile`] as const)(
   `closeDropdownOnSelect=%s controls input focus and dropdown closing`,
   async (closeDropdownOnSelect) => {
     window.innerWidth = 600 // simulate mobile
@@ -1568,7 +1568,7 @@ test.each([true, false, `desktop`] as const)(
     const is_desktop = window.innerWidth > select.breakpoint
     const should_be_closed =
       closeDropdownOnSelect === true ||
-      (closeDropdownOnSelect === `desktop` && !is_desktop)
+      (closeDropdownOnSelect === `if-mobile` && !is_desktop)
 
     // count number of selected items
     const selected_items = document.querySelectorAll(`ul.selected > li`)
@@ -1593,7 +1593,7 @@ test.each([true, false, `desktop`] as const)(
       expect(document.activeElement === input_el).toBe(!should_be_closed)
     }
 
-    if (closeDropdownOnSelect === `desktop`) {
+    if (closeDropdownOnSelect === `if-mobile`) {
       // reduce window width to simulate mobile
       window.innerWidth = 400
       window.dispatchEvent(new Event(`resize`))
@@ -1605,7 +1605,7 @@ test.each([true, false, `desktop`] as const)(
       ) as HTMLLIElement
       if (another_option) {
         another_option.click()
-        // On mobile (when closeDropdownOnSelect = 'desktop'), dropdown should close, input should lose focus
+        // On mobile (when closeDropdownOnSelect = 'if-mobile'), dropdown should close, input should lose focus
         expect(dropdown.classList).toContain(`hidden`) // Now it should be closed
         expect(document.activeElement === input_el).toBe(false)
       } else {
@@ -1616,3 +1616,78 @@ test.each([true, false, `desktop`] as const)(
     }
   },
 )
+
+test(`closeDropdownOnSelect='retain-focus' retains input focus when dropdown closes after option selection`, async () => {
+  mount(MultiSelect, {
+    target: document.body,
+    props: {
+      options: [1, 2, 3],
+      closeDropdownOnSelect: `retain-focus`,
+      open: true,
+    },
+  })
+
+  const input_el = doc_query<HTMLInputElement>(`input[autocomplete]`)
+  input_el.focus()
+  await tick()
+
+  // select an option - should close dropdown but retain focus
+  doc_query(`ul.options > li`).click()
+  await tick()
+
+  expect(document.activeElement).toBe(input_el)
+  expect(document.querySelectorAll(`ul.selected > li`)).toHaveLength(1)
+})
+
+test(`closeDropdownOnSelect='retain-focus' works correctly with maxSelect`, async () => {
+  mount(MultiSelect, {
+    target: document.body,
+    props: {
+      options: [1, 2, 3],
+      closeDropdownOnSelect: `retain-focus`,
+      maxSelect: 2,
+      open: true,
+    },
+  })
+
+  const input_el = doc_query<HTMLInputElement>(`input[autocomplete]`)
+  input_el.focus()
+  await tick()
+
+  // select first option
+  doc_query(`ul.options > li`).click()
+  await tick()
+  expect(document.activeElement).toBe(input_el)
+
+  // select second option (reaching maxSelect)
+  input_el.dispatchEvent(new MouseEvent(`mouseup`, { bubbles: true }))
+  await tick()
+  doc_query(`ul.options > li`).click()
+  await tick()
+
+  expect(document.activeElement).toBe(input_el)
+  expect(document.querySelectorAll(`ul.selected > li`)).toHaveLength(2)
+})
+
+test(`Escape and Tab still blur input even with closeDropdownOnSelect='retain-focus'`, async () => {
+  mount(MultiSelect, {
+    target: document.body,
+    props: {
+      options: [1, 2, 3],
+      closeDropdownOnSelect: `retain-focus`,
+      open: true,
+    },
+  })
+
+  const input_el = doc_query<HTMLInputElement>(`input[autocomplete]`)
+  input_el.focus()
+  await tick()
+
+  // Escape should blur input (retain-focus only applies to selection, not keyboard closing)
+  input_el.dispatchEvent(
+    new KeyboardEvent(`keydown`, { key: `Escape`, bubbles: true }),
+  )
+  await tick()
+
+  expect(document.activeElement).not.toBe(input_el)
+})