fix(dropdown): support typeahead when menu is open (#2357)

Fixes #1975

Author: metonym

src/Dropdown/Dropdown.svelte

@@ -106,7 +106,7 @@
   /** Obtain a reference to the button HTML element */
   export let ref = null;
 
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import WarningAltFilled from "../icons/WarningAltFilled.svelte";
   import WarningFilled from "../icons/WarningFilled.svelte";
   import {
@@ -119,11 +119,28 @@
   const dispatch = createEventDispatcher();
 
   let highlightedIndex = -1;
+  let typeaheadBuffer = "";
+  let typeaheadTimeout = null;
+
+  const TYPEAHEAD_DELAY = 500;
+
+  onMount(() => {
+    return () => {
+      if (typeaheadTimeout) {
+        clearTimeout(typeaheadTimeout);
+      }
+    };
+  });
 
   $: inline = type === "inline";
   $: selectedItem = items.find((item) => item.id === selectedId);
   $: if (!open) {
     highlightedIndex = -1;
+    typeaheadBuffer = "";
+    if (typeaheadTimeout) {
+      clearTimeout(typeaheadTimeout);
+      typeaheadTimeout = null;
+    }
   }
 
   function change(dir) {
@@ -153,6 +170,41 @@
     highlightedIndex = index;
   }
 
+  function typeaheadSearch(char) {
+    if (items.length === 0) return;
+
+    if (typeaheadTimeout) {
+      clearTimeout(typeaheadTimeout);
+    }
+
+    typeaheadBuffer += char.toLowerCase();
+
+    typeaheadTimeout = setTimeout(() => {
+      typeaheadBuffer = "";
+      typeaheadTimeout = null;
+    }, TYPEAHEAD_DELAY);
+
+    // Start search from the next index after current highlight, or from 0 if none highlighted.
+    const startIndex = highlightedIndex >= 0 ? highlightedIndex + 1 : 0;
+
+    for (let i = startIndex; i < items.length; i++) {
+      const itemText = itemToString(items[i]).toLowerCase();
+      if (itemText.startsWith(typeaheadBuffer) && !items[i].disabled) {
+        highlightedIndex = i;
+        return;
+      }
+    }
+
+    // Wrap around: search from beginning to startIndex.
+    for (let i = 0; i < startIndex; i++) {
+      const itemText = itemToString(items[i]).toLowerCase();
+      if (itemText.startsWith(typeaheadBuffer) && !items[i].disabled) {
+        highlightedIndex = i;
+        return;
+      }
+    }
+  }
+
   const dispatchSelect = () => {
     dispatch("select", {
       selectedId,
@@ -230,11 +282,11 @@
       tabindex="0"
       aria-expanded={open}
       on:keydown={(e) => {
-        const { key } = e;
-        if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) {
+        if (["Enter", "ArrowDown", "ArrowUp"].includes(e.key)) {
           e.preventDefault();
         }
-        if (key === "Enter") {
+
+        if (e.key === "Enter") {
           open = !open;
           if (
             highlightedIndex > -1 &&
@@ -244,21 +296,29 @@
             dispatchSelect();
             open = false;
           }
-        } else if (key === "Tab") {
+        } else if (e.key === "Tab") {
           open = false;
-        } else if (key === "ArrowDown") {
+        } else if (e.key === "ArrowDown") {
           if (!open) open = true;
           change(1);
-        } else if (key === "ArrowUp") {
+        } else if (e.key === "ArrowUp") {
           if (!open) open = true;
           change(-1);
-        } else if (key === "Escape") {
+        } else if (e.key === "Escape") {
           open = false;
+        } else if (
+          open &&
+          e.key.length === 1 &&
+          !e.ctrlKey &&
+          !e.metaKey &&
+          !e.altKey
+        ) {
+          e.preventDefault();
+          typeaheadSearch(e.key);
         }
       }}
       on:keyup={(e) => {
-        const { key } = e;
-        if ([" "].includes(key)) {
+        if ([" "].includes(e.key)) {
           e.preventDefault();
         } else {
           return;

tests/Dropdown/Dropdown.test.ts

@@ -465,4 +465,128 @@ describe("Dropdown", () => {
       });
     });
   });
+
+  it("should support typeahead when typing with menu open", async () => {
+    render(Dropdown, {
+      props: {
+        items: [
+          { id: "0", text: "Apple" },
+          { id: "1", text: "Banana" },
+          { id: "2", text: "Cherry" },
+          { id: "3", text: "Date" },
+        ],
+        selectedId: "0",
+      },
+    });
+
+    const button = screen.getByRole("button");
+    await user.click(button);
+
+    // Type 'b' to find Banana
+    await user.keyboard("b");
+
+    // Banana should be highlighted (not selected)
+    const bananaOption = screen.getByRole("option", { name: "Banana" });
+    expect(bananaOption).toHaveClass("bx--list-box__menu-item--highlighted");
+
+    // Selected item should still be Apple
+    expect(button).toHaveTextContent("Apple");
+
+    // Press Enter to select Banana
+    await user.keyboard("{Enter}");
+    expect(button).toHaveTextContent("Banana");
+  });
+
+  it("should support typeahead with multiple characters", async () => {
+    render(Dropdown, {
+      props: {
+        items: [
+          { id: "0", text: "Apple" },
+          { id: "1", text: "Apricot" },
+          { id: "2", text: "Banana" },
+        ],
+        selectedId: "0",
+      },
+    });
+
+    const button = screen.getByRole("button");
+    await user.click(button);
+
+    // Type 'apr' to find Apricot
+    await user.keyboard("apr");
+
+    const apricotOption = screen.getByRole("option", { name: "Apricot" });
+    expect(apricotOption).toHaveClass("bx--list-box__menu-item--highlighted");
+  });
+
+  it("should skip disabled items in typeahead search", async () => {
+    render(Dropdown, {
+      props: {
+        items: [
+          { id: "0", text: "Apple" },
+          { id: "1", text: "Banana", disabled: true },
+          { id: "2", text: "Blueberry" },
+        ],
+        selectedId: "0",
+      },
+    });
+
+    const button = screen.getByRole("button");
+    await user.click(button);
+
+    // Type 'b' - should skip Banana and find Blueberry
+    await user.keyboard("b");
+
+    const blueberryText = screen.getByText("Blueberry");
+    const blueberryOption = blueberryText.closest(".bx--list-box__menu-item");
+    expect(blueberryOption).toHaveClass("bx--list-box__menu-item--highlighted");
+  });
+
+  it("should be case-insensitive in typeahead search", async () => {
+    render(Dropdown, {
+      props: {
+        items: [
+          { id: "0", text: "Apple" },
+          { id: "1", text: "Banana" },
+        ],
+        selectedId: "0",
+      },
+    });
+
+    const button = screen.getByRole("button");
+    await user.click(button);
+
+    // Type 'B' (uppercase) to find Banana
+    await user.keyboard("B");
+
+    const bananaText = screen.getByText("Banana");
+    const bananaOption = bananaText.closest(".bx--list-box__menu-item");
+    expect(bananaOption).toHaveClass("bx--list-box__menu-item--highlighted");
+  });
+
+  it("should wrap around to beginning in typeahead search", async () => {
+    render(Dropdown, {
+      props: {
+        items: [
+          { id: "0", text: "Apple" },
+          { id: "1", text: "Banana" },
+          { id: "2", text: "Cherry" },
+        ],
+        selectedId: "2",
+      },
+    });
+
+    const button = screen.getByRole("button");
+    await user.click(button);
+
+    // Navigate down to beyond the last item, which should wrap
+    await user.keyboard("{ArrowDown}");
+
+    // Now type 'b' - should wrap around to find Banana
+    await user.keyboard("b");
+
+    const bananaText = screen.getByText("Banana");
+    const bananaOption = bananaText.closest(".bx--list-box__menu-item");
+    expect(bananaOption).toHaveClass("bx--list-box__menu-item--highlighted");
+  });
 });