Open dropdown on programmatic focus and close it on blur (#314)

* open dropdown on programmatic focus and close it on blur (closes #289)

new playwright test to verify that input.focus() opens the dropdown and that input.blur() closes it

* fix playwright test 'dropdowns in modal render in body when portal is active'

* fix TS error in CmdPalette.svelte

Author: janosh

readme.md

@@ -68,8 +68,6 @@ Favorite Frontend Tools?
 
 ## 🧠   Mental Model & Core Concepts
 
-### Essential Props
-
 | Prop            | Purpose                                        | Value                                                                               |
 | --------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------- |
 | `options`       | What users can choose from                     | Array of strings, numbers, or objects with `label` property                         |

src/lib/CmdPalette.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { fade } from 'svelte/transition'
   import { MultiSelect } from '.'
-  import type { MultiSelectProps, ObjectOption } from './types'
+  import type { MultiSelectProps, ObjectOption, Option } from './types'
 
   interface Action extends ObjectOption {
     label: string
@@ -51,8 +51,9 @@
     }
   }
 
-  function trigger_action_and_close({ option }: { option: Action }) {
-    option.action(option.label)
+  function trigger_action_and_close(data: { option: Option }) {
+    const { action, label } = data.option as Action
+    action(label)
     open = false
   }
 </script>

src/lib/MultiSelect.svelte

@@ -477,11 +477,41 @@
   }
 
   const handle_input_focus: FocusEventHandler<HTMLInputElement> = (event) => {
-    open_dropdown(event) // Internal logic
-    // Call original forwarded handler
+    open_dropdown(event)
     onfocus?.(event)
   }
 
+  // Override input's focus method to ensure dropdown opens on programmatic focus
+  // https://github.com/janosh/svelte-multiselect/issues/289
+  $effect(() => {
+    if (!input) return
+
+    const orig_focus = input.focus.bind(input)
+
+    input.focus = (options?: FocusOptions) => {
+      orig_focus(options)
+      if (!disabled && !open) open_dropdown(new FocusEvent(`focus`, { bubbles: true }))
+    }
+
+    return () => {
+      if (input) input.focus = orig_focus
+    }
+  })
+
+  const handle_input_blur: FocusEventHandler<HTMLInputElement> = (event) => {
+    // For portalled dropdowns, don't close on blur since clicks on portalled elements
+    // will cause blur but we want to allow the click to register first
+    if (portal_params?.active) {
+      onblur?.(event) // Let the click handler manage closing for portalled dropdowns
+      return
+    }
+
+    // For non-portalled dropdowns, close when focus moves outside the component
+    if (!outerDiv?.contains(event.relatedTarget as Node)) close_dropdown(event)
+
+    onblur?.(event) // Call original handler (if any passed as component prop)
+  }
+
   // reset form validation when required prop changes
   // https://github.com/janosh/svelte-multiselect/issues/285
   $effect.pre(() => {
@@ -657,7 +687,7 @@
       onkeydown={handle_input_keydown}
       onfocus={handle_input_focus}
       oninput={highlight_matching_options}
-      {onblur}
+      onblur={handle_input_blur}
       {onclick}
       {onkeyup}
       {onmousedown}

tests/MultiSelect.test.ts

@@ -23,6 +23,34 @@ test.describe(`input`, () => {
     await expect(options).toBeVisible()
   })
 
+  // https://github.com/janosh/svelte-multiselect/issues/289
+  test(`programmatic focus opens dropdown`, async ({ page }) => {
+    await page.goto(`/ui`, { waitUntil: `networkidle` })
+    const dropdown = page.locator(`#foods div.multiselect > ul.options`)
+    // confirm initial state
+    await expect(dropdown).toHaveClass(/hidden/)
+    await expect(dropdown).toBeHidden()
+
+    await page.evaluate(() => {
+      const input = document.querySelector(
+        `#foods input[autocomplete]`,
+      ) as HTMLInputElement
+      input?.focus()
+    })
+    await expect(dropdown).not.toHaveClass(/hidden/)
+    await expect(dropdown).toBeVisible()
+
+    // also test that input.blur() closes dropdown
+    await page.evaluate(() => {
+      const input = document.querySelector(
+        `#foods input[autocomplete]`,
+      ) as HTMLInputElement
+      input?.blur()
+    })
+    await expect(dropdown).toHaveClass(/hidden/)
+    await expect(dropdown).toBeHidden()
+  })
+
   test(`closes dropdown on tab out`, async ({ page }) => {
     await page.goto(`/ui`, { waitUntil: `networkidle` })
     // note we only test for close on tab out, not on blur since blur should not close in case user
@@ -676,7 +704,7 @@ test.describe(`portal feature`, () => {
     await portalled_languages_options
       .getByRole(`option`, { name: demo_languages[0], exact: true })
       .click()
-    await expect(portalled_languages_options).toBeVisible() // Reverted: expect to be visible for languages
+    await expect(portalled_languages_options).toBeVisible()
     await expect(
       portalled_languages_options.getByRole(`option`, {
         name: demo_languages[0],