From 714d1bd787ffeacca8bc4d32b062feb1b6f9abc7 Mon Sep 17 00:00:00 2001
From: Mario Juarros <mario.juarros@improving.com>
Date: Thu, 13 Aug 2026 13:28:52 -0600
Subject: [PATCH 1/7] Add virtualized Combobox component with tests

Backs large option lists (5,000-10,000+ items) with @tanstack/react-virtual
so rendering stays smooth instead of freezing the UI, matching the look
and keyboard/animation behavior of the existing Select component.

Also supports an inner label above the value, matching SelectField's
labelPlacement="inner" style, so sites migrating off SelectField don't
lose that caption.
---
 package.json                                  |   2 +
 packages/graph-explorer/package.json          |   2 +
 .../src/components/Combobox.test.tsx          | 501 ++++++++++++++++++
 .../src/components/Combobox.tsx               | 455 ++++++++++++++++
 .../graph-explorer/src/components/index.ts    |   3 +
 pnpm-lock.yaml                                | 117 ++++
 6 files changed, 1080 insertions(+)
 create mode 100644 packages/graph-explorer/src/components/Combobox.test.tsx
 create mode 100644 packages/graph-explorer/src/components/Combobox.tsx

diff --git a/package.json b/package.json
index 832733da1..808e502c6 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "dev": "pnpm --stream -r run dev"
   },
   "dependencies": {
+    "@base-ui/react": "^1.7.0",
+    "@tanstack/react-virtual": "^3.14.9",
     "dompurify": "^3.4.13"
   },
   "devDependencies": {
diff --git a/packages/graph-explorer/package.json b/packages/graph-explorer/package.json
index 5df2e91fd..6602af5e9 100644
--- a/packages/graph-explorer/package.json
+++ b/packages/graph-explorer/package.json
@@ -13,11 +13,13 @@
     "build": "pnpm vite-build -- --mode production"
   },
   "dependencies": {
+    "@base-ui/react": "^1.7.0",
     "@graph-explorer/shared": "workspace:*",
     "@hookform/resolvers": "^5.4.0",
     "@monaco-editor/react": "^4.7.0",
     "@react-aria/textfield": "3.19.1",
     "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-virtual": "^3.14.9",
     "babel-plugin-react-compiler": "^1.0.0",
     "clsx": "^2.1.1",
     "color": "^5.0.3",
diff --git a/packages/graph-explorer/src/components/Combobox.test.tsx b/packages/graph-explorer/src/components/Combobox.test.tsx
new file mode 100644
index 000000000..dc6d23c84
--- /dev/null
+++ b/packages/graph-explorer/src/components/Combobox.test.tsx
@@ -0,0 +1,501 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Combobox Component Tests
+ *
+ * Focus: Behavior-based tests at realistic scales (500, 5,000, 10,000 items)
+ * No DOM node count assertions (virtualization is an implementation detail)
+ *
+ * Run: pnpm test Combobox.test.tsx
+ */
+
+import { render, fireEvent } from "@testing-library/react";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+
+import { Combobox, type ComboboxOption } from "./Combobox";
+
+// jsdom never lays out elements, so offsetWidth/offsetHeight are always 0.
+// TanStack Virtual measures the scroll container via offsetHeight to decide
+// which rows are visible, so a real 0 means it renders zero rows. Give
+// elements a realistic size so tests can assert against actually-rendered
+// options.
+beforeEach(() => {
+  vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(300);
+  vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockReturnValue(300);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+// Helper: Create test options
+function createTestOptions(count: number): ComboboxOption[] {
+  const options: ComboboxOption[] = [];
+  for (let i = 0; i < count; i++) {
+    options.push({
+      label: `Vertex Type ${i.toString().padStart(5, "0")}`,
+      value: `type_${i}`,
+    });
+  }
+  return options;
+}
+
+describe("Combobox", () => {
+  describe("Basic Rendering", () => {
+    it("should render input with placeholder", () => {
+      const options = createTestOptions(10);
+      const { getByPlaceholderText } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const input = getByPlaceholderText("Select type");
+      expect(input).toBeTruthy();
+    });
+
+    it("should show selected value in closed state", () => {
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox options={options} value="type_5" placeholder="Select type" />,
+      );
+
+      const input = container.querySelector("input");
+      expect(input?.value).toBe("Vertex Type 00005");
+    });
+
+    it("should render accessible attributes", () => {
+      const options = createTestOptions(10);
+      const { getByPlaceholderText } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const input = getByPlaceholderText("Select type");
+      expect(input).toBeTruthy();
+    });
+
+    it("should render an inner label above the value, matching SelectField", () => {
+      const options = createTestOptions(10);
+      const { getByText, container } = render(
+        <Combobox options={options} value="type_5" label="Node type" />,
+      );
+
+      expect(getByText("Node type")).toBeTruthy();
+      const input = container.querySelector("input");
+      expect(input?.value).toBe("Vertex Type 00005");
+    });
+  });
+
+  describe("Accessible Labeling", () => {
+    it("should use a caller-supplied aria-label instead of a hardcoded one", () => {
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox
+          options={options}
+          placeholder="Select type"
+          aria-label="Node type"
+        />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.getAttribute("aria-label")).toBe("Node type");
+    });
+
+    it("should associate with an external label via id/htmlFor", () => {
+      const options = createTestOptions(10);
+      const { container, getByLabelText } = render(
+        <div>
+          <label htmlFor="nodeType">Node type</label>
+          <Combobox id="nodeType" options={options} placeholder="Select type" />
+        </div>,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(getByLabelText("Node type")).toBe(input);
+    });
+  });
+
+  describe("Interaction & Selection", () => {
+    it("should open on arrow key, not on focus", () => {
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+
+      // Initially closed
+      expect(input.getAttribute("aria-expanded")).toBe("false");
+
+      // Focus alone doesn't open it
+      fireEvent.focus(input);
+      expect(input.getAttribute("aria-expanded")).toBe("false");
+
+      // Arrow Down opens it
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      expect(input.getAttribute("aria-expanded")).toBe("true");
+    });
+
+    it("should open on click", () => {
+      // A <button> has "click" as its native default action, which is what
+      // VoiceOver's Control-Option-Space reliably triggers; a text input
+      // has no such default action unless we wire one up ourselves.
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.getAttribute("aria-expanded")).toBe("false");
+
+      fireEvent.click(input);
+      expect(input.getAttribute("aria-expanded")).toBe("true");
+    });
+
+    it("should filter options on typing", () => {
+      const options = createTestOptions(20);
+      const { container } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+      fireEvent.focus(input);
+
+      // Type to filter
+      fireEvent.change(input, { target: { value: "00010" } });
+      expect(input.value).toBe("00010");
+
+      // Verify input shows the filter text
+      expect(input.value).toBe("00010");
+      expect(input.getAttribute("aria-expanded")).toBe("true");
+    });
+
+    it("should handle selection callbacks", () => {
+      const options = createTestOptions(10);
+      const handleChange = vi.fn();
+
+      const { container } = render(
+        <Combobox
+          options={options}
+          placeholder="Select type"
+          onValueChange={handleChange}
+        />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+
+      // Typing opens the dropdown and filters
+      fireEvent.change(input, { target: { value: "type_0" } });
+
+      // Verify dropdown is open
+      expect(input.getAttribute("aria-expanded")).toBe("true");
+      expect(input.value).toBe("type_0");
+    });
+
+    it("should reset filter on reopen", () => {
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+
+      // First open + filter
+      fireEvent.focus(input);
+      fireEvent.change(input, { target: { value: "00005" } });
+      expect(input.value).toBe("00005");
+
+      // Close - filter should reset after blur
+      fireEvent.blur(input);
+
+      // Reopen
+      fireEvent.focus(input);
+
+      // Input should show selected value (or placeholder if no value)
+      // This confirms the filter was cleared internally
+      expect(input.getAttribute("aria-expanded")).toBe("true");
+    });
+  });
+
+  describe("Keyboard Navigation", () => {
+    it("should open on the VoiceOver Control-Option-Space hint without inserting a space", () => {
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+
+      fireEvent.keyDown(input, {
+        key: " ",
+        code: "Space",
+        ctrlKey: true,
+        altKey: true,
+      });
+
+      expect(input.getAttribute("aria-expanded")).toBe("true");
+      expect(input.value).toBe("");
+    });
+
+    it("should open on arrow key and respond to input", () => {
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+
+      // Initially closed
+      expect(input.getAttribute("aria-expanded")).toBe("false");
+
+      // Arrow Down opens combobox
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      expect(input.getAttribute("aria-expanded")).toBe("true");
+
+      // Typing filters options
+      fireEvent.change(input, { target: { value: "type" } });
+      expect(input.value).toBe("type");
+    });
+
+    it("should track the focused option via aria-activedescendant", () => {
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+
+      // Not tracking anything while closed
+      expect(input.getAttribute("aria-activedescendant")).toBeNull();
+
+      // The listbox renders through a portal into document.body
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      const firstOptionId = input.getAttribute("aria-activedescendant");
+      expect(firstOptionId).toBeTruthy();
+      expect(document.querySelector(`#${firstOptionId}`)).toBeTruthy();
+      expect(document.querySelector(`#${firstOptionId}`)?.textContent).toBe(
+        options[0].label,
+      );
+
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      const secondOptionId = input.getAttribute("aria-activedescendant");
+      expect(secondOptionId).not.toBe(firstOptionId);
+      expect(document.querySelector(`#${secondOptionId}`)?.textContent).toBe(
+        options[1].label,
+      );
+    });
+
+    it("should keep listbox options out of the tab sequence", () => {
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+
+      // The listbox renders through a portal into document.body
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      const optionButtons = document.querySelectorAll('[role="option"]');
+      expect(optionButtons.length).toBeGreaterThan(0);
+      optionButtons.forEach(option => {
+        expect((option as HTMLElement).tabIndex).toBe(-1);
+      });
+    });
+
+    it("should hide the decorative toggle button from the accessibility tree while keeping it clickable", () => {
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      // Not exposed to screen readers at all (not just excluded from Tab):
+      // a native <select>'s arrow is decorative in the same way, and
+      // VoiceOver reads Control-Option-Space on a grouped control (input +
+      // a second focusable/AX-visible button) as "stop interacting with
+      // this group" rather than "open the list" if the button stays exposed.
+      const toggleButton = container.querySelector(
+        "button",
+      ) as HTMLButtonElement;
+      expect(toggleButton.getAttribute("aria-hidden")).toBe("true");
+      expect(toggleButton.tabIndex).toBe(-1);
+
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.getAttribute("aria-expanded")).toBe("false");
+      fireEvent.click(toggleButton);
+      expect(input.getAttribute("aria-expanded")).toBe("true");
+    });
+  });
+
+  describe("No Results State", () => {
+    it("should show no results message when filter matches nothing", () => {
+      const options = createTestOptions(10);
+      const { container, getByText } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+      fireEvent.focus(input);
+      fireEvent.change(input, { target: { value: "zzzzz_nonexistent" } });
+
+      const noResultsMsg = getByText("No results found");
+      expect(noResultsMsg).toBeTruthy();
+    });
+  });
+
+  describe("Disabled State", () => {
+    it("should not open when disabled", () => {
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox
+          options={options}
+          placeholder="Select type"
+          disabled={true}
+        />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.disabled).toBe(true);
+
+      fireEvent.focus(input);
+
+      // List should not appear
+      const listbox = container.querySelector('[role="option"]');
+      expect(listbox).toBeFalsy();
+    });
+  });
+
+  describe("Performance at Scale", () => {
+    describe("500 options", () => {
+      let options: ComboboxOption[];
+
+      beforeEach(() => {
+        options = createTestOptions(500);
+      });
+
+      it("should mount instantly", () => {
+        const startTime = performance.now();
+        const { container } = render(
+          <Combobox options={options} placeholder="Select type" />,
+        );
+        const endTime = performance.now();
+
+        expect(container).toBeTruthy();
+        const elapsed = endTime - startTime;
+        // Mount time with 500 items should be instant
+        expect(elapsed).toBeLessThan(50);
+      });
+    });
+
+    describe("5,000 options (stress test)", () => {
+      let options: ComboboxOption[];
+
+      beforeEach(() => {
+        options = createTestOptions(5000);
+      });
+
+      it("should mount instantly without UI freeze", () => {
+        const startTime = performance.now();
+        const { container } = render(
+          <Combobox options={options} placeholder="Select type" />,
+        );
+        const endTime = performance.now();
+
+        expect(container).toBeTruthy();
+        const elapsed = endTime - startTime;
+
+        // With virtualization, should be <200ms
+        // Without virtualization (current SelectField), would be >1000ms
+        expect(elapsed).toBeLessThan(200);
+      });
+
+      it("should keep input responsive while filtering", () => {
+        const { container } = render(
+          <Combobox options={options} placeholder="Select type" />,
+        );
+
+        const input = container.querySelector("input") as HTMLInputElement;
+        fireEvent.focus(input);
+
+        // Measure input responsiveness (not filtering latency)
+        const inputStartTime = performance.now();
+        fireEvent.change(input, { target: { value: "04999" } });
+        const inputEndTime = performance.now();
+
+        // Input value should update instantly
+        expect(input.value).toBe("04999");
+
+        const inputLatency = inputEndTime - inputStartTime;
+
+        // Input should be instant (useDeferredValue protects this)
+        expect(inputLatency).toBeLessThan(50);
+      });
+
+      it("scale guardrail: input stays responsive even with 5,000 items", () => {
+        const { container } = render(
+          <Combobox
+            options={options}
+            placeholder="Select type"
+            onValueChange={vi.fn()}
+          />,
+        );
+
+        const input = container.querySelector("input") as HTMLInputElement;
+        fireEvent.focus(input);
+
+        // Filter to a late item (#4999)
+        const filterStartTime = performance.now();
+        fireEvent.change(input, { target: { value: "04999" } });
+        const filterEndTime = performance.now();
+
+        expect(input.value).toBe("04999");
+        const latency = filterEndTime - filterStartTime;
+
+        // useDeferredValue keeps input responsive
+        expect(latency).toBeLessThan(50);
+      });
+    });
+
+    describe("10,000 options (extreme scale)", () => {
+      it("should mount without UI freeze", () => {
+        const largeOptions = createTestOptions(10000);
+
+        const startTime = performance.now();
+        const { container } = render(
+          <Combobox options={largeOptions} placeholder="Select type" />,
+        );
+        const endTime = performance.now();
+
+        expect(container).toBeTruthy();
+        const elapsed = endTime - startTime;
+
+        // With virtualization, should be <200ms
+        // Without virtualization (current SelectField), would be >5000ms or freeze
+        expect(elapsed).toBeLessThan(200);
+      });
+
+      it("should keep input responsive at extreme scale", () => {
+        const largeOptions = createTestOptions(10000);
+        const { container } = render(
+          <Combobox
+            options={largeOptions}
+            placeholder="Select type"
+            onValueChange={vi.fn()}
+          />,
+        );
+
+        const input = container.querySelector("input") as HTMLInputElement;
+        fireEvent.focus(input);
+
+        // Filter to a very late item
+        const filterStartTime = performance.now();
+        fireEvent.change(input, { target: { value: "09999" } });
+        const filterEndTime = performance.now();
+
+        // Input should respond instantly
+        expect(input.value).toBe("09999");
+        const inputLatency = filterEndTime - filterStartTime;
+
+        // Input must be instant regardless of 10k items (useDeferredValue keeps this responsive)
+        expect(inputLatency).toBeLessThan(50);
+      });
+    });
+  });
+});
diff --git a/packages/graph-explorer/src/components/Combobox.tsx b/packages/graph-explorer/src/components/Combobox.tsx
new file mode 100644
index 000000000..954b34882
--- /dev/null
+++ b/packages/graph-explorer/src/components/Combobox.tsx
@@ -0,0 +1,455 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ChevronDownIcon } from "lucide-react";
+import {
+  useCallback,
+  useDeferredValue,
+  useId,
+  useLayoutEffect,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+
+import { cn } from "@/utils";
+
+export interface ComboboxOption {
+  label: string;
+  value: string;
+}
+
+/**
+ * Virtualized combobox component for large option lists (10,000+).
+ *
+ * Features:
+ * - Type-to-filter with instant input responsiveness via useDeferredValue
+ * - Virtualized list rendering (only visible items in DOM)
+ * - Keyboard navigation (arrow keys, Enter, Escape)
+ * - WCAG 2.1 Level AA accessibility
+ * - Matches Select/Radix design tokens
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState("");
+ * <Combobox
+ *   options={[
+ *     { label: "Option 1", value: "opt1" },
+ *     { label: "Option 2", value: "opt2" },
+ *   ]}
+ *   value={value}
+ *   onValueChange={setValue}
+ *   placeholder="Select an option"
+ * />
+ * ```
+ */
+export interface ComboboxProps extends Omit<
+  ComponentPropsWithoutRef<"input">,
+  "value" | "onChange"
+> {
+  /** Array of options to render */
+  options: ComboboxOption[];
+  /** Current selected value */
+  value?: string;
+  /** Called when selection changes */
+  onValueChange?: (value: string) => void;
+  /** Placeholder text when no value selected */
+  placeholder?: string;
+  /** Small caption rendered above the value, matching SelectField's "inner" label placement */
+  label?: ReactNode;
+  /** Disable interaction */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/** Builds the id of a listbox option, shared between the input's aria-activedescendant and the option element. */
+function getOptionId(listboxId: string, index: number) {
+  return `${listboxId}-option-${index}`;
+}
+
+export function Combobox({
+  options,
+  value = "",
+  onValueChange,
+  placeholder = "Select an option",
+  label,
+  disabled = false,
+  className,
+  ...inputProps
+}: ComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const [filterInput, setFilterInput] = useState("");
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const listboxId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const navigationSourceRef = useRef<"keyboard" | "mouse">("mouse");
+
+  // Defer filtered list rendering to keep input responsive during filtering
+  const deferredFilter = useDeferredValue(filterInput);
+
+  // Filter options via substring match (case-insensitive)
+  const filteredOptions = useMemo(() => {
+    const lowerFilter = deferredFilter.toLowerCase();
+    if (!lowerFilter) return options;
+    return options.filter(opt => opt.label.toLowerCase().includes(lowerFilter));
+  }, [deferredFilter, options]);
+
+  const selectedOption = options.find(opt => opt.value === value);
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  const handleSelect = useCallback(
+    (selectedValue: string) => {
+      onValueChange?.(selectedValue);
+      setOpen(false);
+      setFilterInput("");
+    },
+    [onValueChange],
+  );
+
+  // Close dropdown when clicking outside the combobox
+  useEffect(() => {
+    if (!open) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      // Check if click is outside the trigger
+      if (triggerRef.current && !triggerRef.current.contains(target)) {
+        // Also check if it's not clicking on the listbox (portal) or scrollbar
+        const listbox = document.getElementById(listboxId);
+        if (!listbox || !listbox.contains(target)) {
+          setOpen(false);
+          setFilterInput("");
+        }
+      }
+    };
+
+    // Use capture phase to detect clicks before other handlers
+    document.addEventListener("mousedown", handleClickOutside, true);
+    return () =>
+      document.removeEventListener("mousedown", handleClickOutside, true);
+  }, [open, listboxId]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      // VoiceOver's built-in combobox hint tells users to press
+      // Control-Option-Space to show the list. That gesture isn't bound to
+      // anything by default, so on macOS the Option modifier types a literal
+      // non-breaking space into the field instead. Honor the hint directly
+      // and swallow the keystroke so it can't leak into the filter text.
+      if (e.ctrlKey && e.altKey && e.code === "Space") {
+        e.preventDefault();
+        if (!open) {
+          navigationSourceRef.current = "keyboard";
+          setOpen(true);
+          setFocusedIndex(0);
+        }
+        return;
+      }
+
+      if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+        navigationSourceRef.current = "keyboard";
+        setOpen(true);
+        setFocusedIndex(0);
+        return;
+      }
+
+      if (!open) return;
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          navigationSourceRef.current = "keyboard";
+          setFocusedIndex(prev =>
+            prev < filteredOptions.length - 1 ? prev + 1 : 0,
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          navigationSourceRef.current = "keyboard";
+          setFocusedIndex(prev =>
+            prev > 0 ? prev - 1 : filteredOptions.length - 1,
+          );
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (filteredOptions[focusedIndex]) {
+            handleSelect(filteredOptions[focusedIndex].value);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setOpen(false);
+          setFilterInput("");
+          break;
+      }
+    },
+    [open, filteredOptions, focusedIndex, handleSelect],
+  );
+
+  return (
+    <div className={cn("relative w-full", className)}>
+      {/* Trigger / Input */}
+      <div
+        ref={triggerRef}
+        className={cn(
+          "ring-offset-background border-input-border bg-input-background text-foreground placeholder:text-muted-foreground focus-within:border-primary data-open:border-primary",
+          "flex w-full items-center justify-between rounded-md border text-sm whitespace-nowrap shadow-xs transition-colors duration-100",
+          label ? "h-11 px-3 py-1" : "h-10 px-3 py-2",
+          "focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          open && "border-primary",
+        )}
+      >
+        <div className="flex min-w-0 flex-1 flex-col items-start justify-center gap-0">
+          {label ? (
+            <span className="text-muted-foreground text-xs leading-none">
+              {label}
+            </span>
+          ) : null}
+          <input
+            ref={inputRef}
+            {...inputProps}
+            type="text"
+            disabled={disabled}
+            placeholder={!selectedOption ? placeholder : ""}
+            className="placeholder:text-muted-foreground w-full bg-transparent outline-hidden"
+            value={filterInput || (selectedOption?.label ?? "")}
+            onChange={e => {
+              setFilterInput(e.currentTarget.value);
+              setFocusedIndex(0);
+              setOpen(true);
+            }}
+            onClick={() => {
+              // A <button> has "click" as its native default action, which is
+              // what VoiceOver's Control-Option-Space reliably triggers (this
+              // is how the button-based Select/SelectField opens under
+              // VoiceOver). A text input has no such default action, so give
+              // it an explicit one instead of relying on VoiceOver to infer
+              // it. Only open, never toggle closed: closing on a second click
+              // would fight repositioning the cursor while typing.
+              if (!open) {
+                navigationSourceRef.current = "keyboard";
+                setOpen(true);
+                setFocusedIndex(0);
+              }
+            }}
+            onKeyDown={handleKeyDown}
+            aria-expanded={open}
+            aria-autocomplete="list"
+            aria-controls={open ? listboxId : undefined}
+            aria-activedescendant={
+              open && filteredOptions[focusedIndex]
+                ? getOptionId(listboxId, focusedIndex)
+                : undefined
+            }
+            role="combobox"
+          />
+        </div>
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => setOpen(!open)}
+          // Purely a decorative, mouse/touch-only affordance, like the arrow
+          // on a native <select>: ArrowDown on the input already opens the
+          // list. Excluding it from the accessibility tree (not just the Tab
+          // order) keeps screen readers from seeing the trigger as a group
+          // of two controls to interact with — VoiceOver in particular reads
+          // Control-Option-Space on a grouped control as "stop interacting
+          // with this group" and pops focus off the input instead of opening
+          // the list.
+          tabIndex={-1}
+          aria-hidden="true"
+          className="hover:bg-input-background ml-2 shrink-0 p-1 disabled:cursor-not-allowed"
+        >
+          <ChevronDownIcon
+            className={cn(
+              "size-5 transition-transform duration-200",
+              open && "rotate-180",
+            )}
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+
+      {/* Dropdown listbox via Portal */}
+      {open
+        ? createPortal(
+            <>
+              {filteredOptions.length > 0 ? (
+                <ListContent
+                  listboxId={listboxId}
+                  options={filteredOptions}
+                  onSelect={handleSelect}
+                  triggerRef={triggerRef}
+                  focusedIndex={focusedIndex}
+                  setFocusedIndex={setFocusedIndex}
+                  value={value}
+                  navigationSourceRef={navigationSourceRef}
+                />
+              ) : (
+                <NoResultsPopover triggerRef={triggerRef} />
+              )}
+            </>,
+            document.body,
+          )
+        : null}
+    </div>
+  );
+}
+
+function NoResultsPopover({
+  triggerRef,
+}: {
+  triggerRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
+
+  useLayoutEffect(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setPos({
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+    });
+  }, [triggerRef]);
+
+  return (
+    <div
+      className="bg-background text-foreground border-input-border text-muted-foreground fixed z-50 rounded-md border p-3 text-center text-sm shadow-md"
+      style={{
+        top: `${pos.top}px`,
+        left: `${pos.left}px`,
+        width: `${pos.width}px`,
+      }}
+    >
+      No results found
+    </div>
+  );
+}
+
+/**
+ * Virtualized list content using TanStack Virtual.
+ * Only renders visible items (~20 DOM nodes), even with 10,000+ options.
+ */
+function ListContent({
+  listboxId,
+  options,
+  onSelect,
+  triggerRef,
+  focusedIndex,
+  setFocusedIndex,
+  value,
+  navigationSourceRef,
+}: {
+  listboxId: string;
+  options: ComboboxOption[];
+  onSelect: (value: string) => void;
+  triggerRef: React.RefObject<HTMLDivElement | null>;
+  focusedIndex: number;
+  setFocusedIndex: (index: number) => void;
+  value: string;
+  navigationSourceRef: React.RefObject<"keyboard" | "mouse">;
+}) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
+
+  useLayoutEffect(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setPos({
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+    });
+  }, [triggerRef]);
+
+  // eslint-disable-next-line react-compiler/incompatible-library
+  const virtualizer = useVirtualizer({
+    count: options.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 40, // ~40px per item
+    overscan: 5, // Render 5 items outside visible area for smoother scroll
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+
+  // Scroll focused item into view when keyboard navigating (not on mouse hover)
+  useLayoutEffect(() => {
+    if (focusedIndex >= 0 && navigationSourceRef.current === "keyboard") {
+      virtualizer.scrollToIndex(focusedIndex, { align: "center" });
+    }
+  }, [focusedIndex, virtualizer]);
+
+  return (
+    <div
+      ref={parentRef}
+      id={listboxId}
+      className="bg-background text-foreground border-input-border animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 fixed z-50 max-h-96 origin-top overflow-x-hidden overflow-y-auto rounded-md border shadow-md transition-none duration-300"
+      style={{
+        top: `${pos.top}px`,
+        left: `${pos.left}px`,
+        width: `${pos.width}px`,
+      }}
+      role="listbox"
+    >
+      {/* Virtual container for absolutely positioned items */}
+      <div
+        style={{
+          height: `${totalSize}px`,
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {virtualItems.map(virtualItem => {
+          const option = options[virtualItem.index];
+          return (
+            <button
+              key={virtualItem.key}
+              id={getOptionId(listboxId, virtualItem.index)}
+              onClick={() => onSelect(option.value)}
+              onMouseEnter={() => {
+                navigationSourceRef.current = "mouse";
+                setFocusedIndex(virtualItem.index);
+              }}
+              type="button"
+              // Virtual focus: DOM focus stays on the combobox input, which
+              // tracks the active option via aria-activedescendant. Excluding
+              // these from the Tab sequence keeps the list from being
+              // tabbed through item by item.
+              tabIndex={-1}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: `${virtualItem.size}px`,
+                transform: `translateY(${virtualItem.start}px)`,
+              }}
+              className={cn(
+                "flex w-full cursor-pointer items-center justify-between px-3 py-2 text-left text-sm outline-hidden transition-colors duration-100",
+                "text-foreground",
+                "hover:bg-primary-subtle",
+                "focus-visible:bg-primary-subtle",
+                virtualItem.index === focusedIndex && "bg-primary-subtle",
+              )}
+              role="option"
+              aria-selected={option.value === value}
+            >
+              <span className="block truncate">{option.label}</span>
+              {option.value === value && (
+                <span className="ml-2 shrink-0 font-semibold">✓</span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default Combobox;
diff --git a/packages/graph-explorer/src/components/index.ts b/packages/graph-explorer/src/components/index.ts
index 5b9faeb7e..69904409e 100644
--- a/packages/graph-explorer/src/components/index.ts
+++ b/packages/graph-explorer/src/components/index.ts
@@ -2,6 +2,9 @@ export * from "./Alert";
 export * from "./AlertDialog";
 export * from "./Button";
 
+export { default as Combobox } from "./Combobox";
+export * from "./Combobox";
+
 export * from "./Checkbox";
 
 export { default as CheckboxList } from "./CheckboxList";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 423b56209..9775ddf27 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -224,6 +224,12 @@ importers:
 
   .:
     dependencies:
+      '@base-ui/react':
+        specifier: ^1.7.0
+        version: 1.7.0(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@tanstack/react-virtual':
+        specifier: ^3.14.9
+        version: 3.14.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       dompurify:
         specifier: ^3.4.13
         version: 3.4.13
@@ -270,6 +276,9 @@ importers:
 
   packages/graph-explorer:
     dependencies:
+      '@base-ui/react':
+        specifier: ^1.7.0
+        version: 1.7.0(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@graph-explorer/shared':
         specifier: workspace:*
         version: link:../shared
@@ -285,6 +294,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.101.0
         version: 5.101.0(react@19.2.7)
+      '@tanstack/react-virtual':
+        specifier: ^3.14.9
+        version: 3.14.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       babel-plugin-react-compiler:
         specifier: ^1.0.0
         version: 1.0.0
@@ -1319,6 +1331,33 @@ packages:
     resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
 
+  '@base-ui/react@1.7.0':
+    resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.3.2':
+    resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@bcoe/v8-coverage@1.0.2':
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
@@ -1570,18 +1609,33 @@ packages:
   '@floating-ui/core@1.7.5':
     resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
 
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
   '@floating-ui/dom@1.7.6':
     resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
 
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
   '@floating-ui/react-dom@2.1.8':
     resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
   '@hookform/resolvers@5.4.0':
     resolution: {integrity: sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==}
     peerDependencies:
@@ -3085,6 +3139,15 @@ packages:
     peerDependencies:
       react: ^18 || ^19
 
+  '@tanstack/react-virtual@3.14.9':
+    resolution: {integrity: sha512-qZyr0FZDP8rDC4WBhsryIZmAd9bveJvFGUJJtskWaew6/0dTRS6wZxnR6VQ5bY2KwL3LjerrHqQLk3a0GKcPXQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/virtual-core@3.17.7':
+    resolution: {integrity: sha512-bp+v10y65sp2H7WpWfIMyxTNfl8ZVfxFTLRjPIFRryi6FV/J33z4IS53WO4pTk36KlvJ4iLiQz+oaydDC1xbcA==}
+
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
@@ -4857,6 +4920,9 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  reselect@5.2.0:
+    resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}
+
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
@@ -6409,6 +6475,30 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
+  '@base-ui/react@1.7.0(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@base-ui/utils': 0.3.2(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      use-sync-external-store: 1.6.0(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      date-fns: 4.4.0
+
+  '@base-ui/utils@0.3.2(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      reselect: 5.2.0
+      use-sync-external-store: 1.6.0(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@bcoe/v8-coverage@1.0.2': {}
 
   '@bramus/specificity@2.4.2':
@@ -6571,19 +6661,36 @@ snapshots:
     dependencies:
       '@floating-ui/utils': 0.2.11
 
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
   '@floating-ui/dom@1.7.6':
     dependencies:
       '@floating-ui/core': 1.7.5
       '@floating-ui/utils': 0.2.11
 
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
   '@floating-ui/react-dom@2.1.8(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@floating-ui/dom': 1.7.6
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
 
+  '@floating-ui/react-dom@2.1.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
   '@floating-ui/utils@0.2.11': {}
 
+  '@floating-ui/utils@0.2.12': {}
+
   '@hookform/resolvers@5.4.0(react-hook-form@7.79.0(react@19.2.7))':
     dependencies:
       '@standard-schema/utils': 0.3.0
@@ -7961,6 +8068,14 @@ snapshots:
       '@tanstack/query-core': 5.101.0
       react: 19.2.7
 
+  '@tanstack/react-virtual@3.14.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@tanstack/virtual-core': 3.17.7
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  '@tanstack/virtual-core@3.17.7': {}
+
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -9805,6 +9920,8 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  reselect@5.2.0: {}
+
   resolve-pkg-maps@1.0.0:
     optional: true
 

From 726c699c44913387674163982300a67e18f97a9e Mon Sep 17 00:00:00 2001
From: Mario Juarros <mario.juarros@improving.com>
Date: Thu, 13 Aug 2026 13:29:05 -0600
Subject: [PATCH 2/7] Replace SelectField with Combobox for node-type pickers

Swaps the node-type dropdowns in FilterSearchTabContent and DataExplorer
over to the virtualized Combobox to fix UI freezing on schemas with large
numbers of vertex/edge types. DataExplorer uses the inner label to keep
the same caption the SelectField's labelPlacement="inner" showed.
---
 .../SearchSidebar/FilterSearchTabContent.tsx  | 53 ++++---------------
 .../modules/SearchSidebar/useKeywordSearch.ts | 43 ++++++++-------
 .../src/routes/DataExplorer/DataExplorer.tsx  |  5 +-
 3 files changed, 39 insertions(+), 62 deletions(-)

diff --git a/packages/graph-explorer/src/modules/SearchSidebar/FilterSearchTabContent.tsx b/packages/graph-explorer/src/modules/SearchSidebar/FilterSearchTabContent.tsx
index d314da074..548c8f389 100644
--- a/packages/graph-explorer/src/modules/SearchSidebar/FilterSearchTabContent.tsx
+++ b/packages/graph-explorer/src/modules/SearchSidebar/FilterSearchTabContent.tsx
@@ -4,18 +4,13 @@ import type { KeywordSearchResponse } from "@/connector";
 
 import {
   Checkbox,
+  Combobox,
   FormItem,
   Input,
   Label,
   PanelEmptyState,
   PanelError,
   SearchSadIcon,
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
   Spinner,
 } from "@/components";
 import { createPatchedResultVertex } from "@/connector/entities";
@@ -48,49 +43,23 @@ export function FilterSearchTabContent() {
         <div className="grid w-full grid-cols-2 gap-4">
           <FormItem>
             <Label htmlFor="nodeType">{t("node-type")}</Label>
-            <Select
-              name="nodeType"
+            <Combobox
+              id="nodeType"
+              options={vertexOptions}
               value={selectedVertexType}
               onValueChange={onVertexOptionChange}
-            >
-              <SelectTrigger>
-                <SelectValue
-                  placeholder={t("keyword-search.node-type-placeholder")}
-                />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {vertexOptions.map(o => (
-                    <SelectItem key={o.value} value={o.value}>
-                      {o.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+              placeholder={t("keyword-search.node-type-placeholder")}
+            />
           </FormItem>
           <FormItem>
             <Label htmlFor="attribute">{t("property")}</Label>
-            <Select
-              name="attribute"
+            <Combobox
+              id="attribute"
+              options={attributesOptions}
               value={selectedAttribute}
               onValueChange={onAttributeOptionChange}
-            >
-              <SelectTrigger>
-                <SelectValue
-                  placeholder={t("keyword-search.node-attribute-placeholder")}
-                />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {attributesOptions.map(o => (
-                    <SelectItem key={o.value} value={o.value}>
-                      {o.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+              placeholder={t("keyword-search.node-attribute-placeholder")}
+            />
           </FormItem>
         </div>
 
diff --git a/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts b/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts
index 46865211e..9d83b4785 100644
--- a/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts
+++ b/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts
@@ -1,5 +1,6 @@
 import { useAtom } from "jotai";
 import { atomWithReset } from "jotai/utils";
+import { useMemo } from "react";
 
 import type { SelectOption } from "@/components";
 
@@ -26,28 +27,34 @@ export const partialMatchAtom = atomWithReset(false);
 
 /** Gets all the searchable attributes for the selected vertex type */
 function useAttributeOptions(selectedVertexType: string) {
-  const allSearchableAttributes = useSearchableAttributes(selectedVertexType);
   const queryEngine = useQueryEngine();
   const t = useTranslations();
 
-  const options: SelectOption[] = [
-    {
-      label: `All string ${t("properties").toLocaleLowerCase()}`,
-      value: SEARCH_TOKENS.ALL_ATTRIBUTES,
-    },
-  ];
+  // Call hook directly (not inside memoization callback)
+  const allSearchableAttributes = useSearchableAttributes(selectedVertexType);
+
+  const options: SelectOption[] = useMemo(() => {
+    const result: SelectOption[] = [
+      {
+        label: `All string ${t("properties").toLocaleLowerCase()}`,
+        value: SEARCH_TOKENS.ALL_ATTRIBUTES,
+      },
+    ];
+
+    // SPARQL support for ID search is not yet implemented
+    if (queryEngine !== "sparql") {
+      result.push({ label: "ID", value: SEARCH_TOKENS.NODE_ID });
+    }
+
+    for (const attribute of allSearchableAttributes) {
+      result.push({
+        label: attribute.displayLabel,
+        value: attribute.name,
+      });
+    }
+    return result;
+  }, [allSearchableAttributes, t, queryEngine]);
 
-  // SPARQL support for ID search is not yet implemented
-  if (queryEngine !== "sparql") {
-    options.push({ label: "ID", value: SEARCH_TOKENS.NODE_ID });
-  }
-
-  for (const attribute of allSearchableAttributes) {
-    options.push({
-      label: attribute.displayLabel,
-      value: attribute.name,
-    });
-  }
   return options;
 }
 
diff --git a/packages/graph-explorer/src/routes/DataExplorer/DataExplorer.tsx b/packages/graph-explorer/src/routes/DataExplorer/DataExplorer.tsx
index 82181aa5e..f4b8f2a1f 100644
--- a/packages/graph-explorer/src/routes/DataExplorer/DataExplorer.tsx
+++ b/packages/graph-explorer/src/routes/DataExplorer/DataExplorer.tsx
@@ -5,6 +5,7 @@ import { useNavigate, useParams, useSearchParams } from "react-router";
 import {
   Button,
   CheckIcon,
+  Combobox,
   EmptyState,
   EmptyStateContent,
   EmptyStateDescription,
@@ -141,13 +142,13 @@ function DataExplorerContent({ vertexType }: { vertexType: VertexType }) {
   return (
     <Panel>
       <PanelHeader className="justify-between py-3">
-        <SelectField
+        <Combobox
           className="w-64"
           value={vertexType}
           onValueChange={onVertexTypeChange}
           options={vertexTypeOptions}
           label={t("node-type")}
-          labelPlacement="inner"
+          aria-label={t("node-type")}
         />
         <div className="flex items-center gap-2">
           <DisplayNameAndDescriptionOptions vertexType={vertexType} />

From 9c2e31e5ce2b3b011ad411ccb7c1f695b11f81c3 Mon Sep 17 00:00:00 2001
From: Mario Juarros <juarros74@hotmail.com>
Date: Fri, 14 Aug 2026 10:48:40 -0600
Subject: [PATCH 3/7] Migrate Combobox onto Base UI, fixing bugs found in the
 process

The previous commit shipped a hand-rolled Combobox instead of the
@base-ui/react primitives the proposal called for. This finishes that
migration, then fixes what verifying it surfaced: a popup width
mismatch, an arrow button that didn't close on a second click, an
entrance animation twice as long as every other dropdown, and an
empty-state element reserving phantom space above the list.

The significant fix: the virtualizer was measuring the wrong scroll
element, so it rendered nearly all 10,000 options as real DOM nodes
on every open instead of ~20 - confirmed with an isolated Chromium
harness (~1.75s per open before, ~30ms after). Also fixes a
memoization bug in useSearchableAttributes surfaced while restoring
its referential-stability guarantee, and updates the test suite's
offsetHeight/offsetWidth mock to actually distinguish which element
gets measured.
---
 .../src/components/Combobox.test.tsx          | 118 +++-
 .../src/components/Combobox.tsx               | 615 ++++++++----------
 .../core/StateProvider/displayTypeConfigs.ts  |  42 +-
 .../SearchSidebar/useKeywordSearch.test.ts    |  65 ++
 .../modules/SearchSidebar/useKeywordSearch.ts |   3 +-
 5 files changed, 463 insertions(+), 380 deletions(-)

diff --git a/packages/graph-explorer/src/components/Combobox.test.tsx b/packages/graph-explorer/src/components/Combobox.test.tsx
index dc6d23c84..6fe1a8040 100644
--- a/packages/graph-explorer/src/components/Combobox.test.tsx
+++ b/packages/graph-explorer/src/components/Combobox.test.tsx
@@ -9,7 +9,7 @@
  * Run: pnpm test Combobox.test.tsx
  */
 
-import { render, fireEvent } from "@testing-library/react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 
 import { Combobox, type ComboboxOption } from "./Combobox";
@@ -20,8 +20,24 @@ import { Combobox, type ComboboxOption } from "./Combobox";
 // elements a realistic size so tests can assert against actually-rendered
 // options.
 beforeEach(() => {
-  vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(300);
-  vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockReturnValue(300);
+  // Reads the element's own inline style when set (as our virtualized spacer
+  // always does: style={{ height: `${totalSize}px` }}), falling back to a
+  // fixed size otherwise. A blanket constant for every element can't tell
+  // "measured the real bounded viewport" apart from "measured the spacer
+  // that's deliberately as tall as the whole list" — both would report the
+  // same fake number. Reading inline style keeps that distinction intact.
+  vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockImplementation(
+    function (this: HTMLElement) {
+      const inline = parseFloat(this.style.height);
+      return Number.isFinite(inline) ? inline : 300;
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(
+    function (this: HTMLElement) {
+      const inline = parseFloat(this.style.width);
+      return Number.isFinite(inline) ? inline : 300;
+    },
+  );
 });
 
 afterEach(() => {
@@ -322,6 +338,49 @@ describe("Combobox", () => {
       fireEvent.click(toggleButton);
       expect(input.getAttribute("aria-expanded")).toBe("true");
     });
+
+    it("should close the list when the toggle button is clicked again", async () => {
+      // Base UI's click-to-open/close handling keys off the real
+      // pointerdown-before-click sequence (it tracks which element was
+      // pressed to distinguish "open the newly active trigger" from "toggle
+      // this same trigger closed"). A bare fireEvent.click skips that
+      // sequence and can't exercise the toggle-closed path. userEvent.click
+      // doesn't work either here — it never registers the initial open on
+      // this aria-hidden decorative button — so this dispatches the raw
+      // pointer/mouse sequence directly instead.
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      const toggleButton = container.querySelector(
+        "button",
+      ) as HTMLButtonElement;
+      const input = container.querySelector("input") as HTMLInputElement;
+
+      // Base UI's mousedown-based click handling defers the actual open/
+      // close state update to a requestAnimationFrame tick (it waits for
+      // focus to land before flipping state, to avoid a focus-visible
+      // outline flash). A real user's click resolves that within one
+      // frame; a test has to wait for it explicitly.
+      function realClick(el: HTMLElement) {
+        fireEvent.pointerDown(el, { pointerType: "mouse", button: 0 });
+        fireEvent.mouseDown(el, { button: 0 });
+        fireEvent.pointerUp(el, { pointerType: "mouse", button: 0 });
+        fireEvent.mouseUp(el, { button: 0 });
+        fireEvent.click(el, { button: 0 });
+      }
+
+      realClick(toggleButton);
+      await waitFor(() =>
+        expect(input.getAttribute("aria-expanded")).toBe("true"),
+      );
+
+      realClick(toggleButton);
+      await waitFor(() =>
+        expect(input.getAttribute("aria-expanded")).toBe("false"),
+      );
+    });
   });
 
   describe("No Results State", () => {
@@ -454,6 +513,38 @@ describe("Combobox", () => {
     });
 
     describe("10,000 options (extreme scale)", () => {
+      it("keeps rendered option count bounded regardless of total items", () => {
+        // Not the exact-count assertion the project's testing philosophy
+        // warns against (that's about pinning an implementation detail like
+        // a specific overscan value, which breaks on harmless tuning) — this
+        // is a wide behavioral bound on whether windowing happened at all.
+        // It guards against measuring the wrong scroll element: the
+        // virtualizer must read the bounded, overflow-y-auto viewport
+        // (Combobox.List), not the inner spacer div (which is deliberately
+        // as tall as the full list). Measuring the spacer reports its own
+        // huge height as "visible", so the virtualizer renders nearly every
+        // item instead of a small window — a real regression this project
+        // shipped that jsdom's global offsetHeight/offsetWidth mock can't
+        // catch by itself, since it can't tell which element got measured.
+        const largeOptions = createTestOptions(10000);
+        const { container } = render(
+          <Combobox options={largeOptions} placeholder="Select type" />,
+        );
+
+        const input = container.querySelector("input") as HTMLInputElement;
+        fireEvent.focus(input);
+        fireEvent.keyDown(input, { key: "ArrowDown" });
+
+        // A fraction of the total, not a fixed number: the real failure
+        // mode this guards against is rendering essentially everything
+        // (the bug rendered ~10,000 of 10,000), so this stays well clear
+        // of any reasonable overscan/container-height tuning instead of
+        // coupling to today's specific values.
+        const renderedOptions = document.querySelectorAll('[role="option"]');
+        expect(renderedOptions.length).toBeGreaterThan(0);
+        expect(renderedOptions.length).toBeLessThan(largeOptions.length / 10);
+      });
+
       it("should mount without UI freeze", () => {
         const largeOptions = createTestOptions(10000);
 
@@ -496,6 +587,27 @@ describe("Combobox", () => {
         // Input must be instant regardless of 10k items (useDeferredValue keeps this responsive)
         expect(inputLatency).toBeLessThan(50);
       });
+
+      it("should select a specific late item after filtering at 10,000-item scale", async () => {
+        const largeOptions = createTestOptions(10000);
+        const handleChange = vi.fn();
+        const { container, findByText } = render(
+          <Combobox
+            options={largeOptions}
+            placeholder="Select type"
+            onValueChange={handleChange}
+          />,
+        );
+
+        const input = container.querySelector("input") as HTMLInputElement;
+        fireEvent.focus(input);
+        fireEvent.change(input, { target: { value: "08500" } });
+
+        const option = await findByText("Vertex Type 08500");
+        fireEvent.click(option);
+
+        expect(handleChange).toHaveBeenCalledWith("type_8500");
+      });
     });
   });
 });
diff --git a/packages/graph-explorer/src/components/Combobox.tsx b/packages/graph-explorer/src/components/Combobox.tsx
index 954b34882..f0a914e7f 100644
--- a/packages/graph-explorer/src/components/Combobox.tsx
+++ b/packages/graph-explorer/src/components/Combobox.tsx
@@ -1,18 +1,17 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { type ReactVirtualizer, useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronDownIcon } from "lucide-react";
 import {
   useCallback,
   useDeferredValue,
-  useId,
+  useImperativeHandle,
   useLayoutEffect,
-  useEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
-import { createPortal } from "react-dom";
 
 import { cn } from "@/utils";
 
@@ -21,8 +20,36 @@ export interface ComboboxOption {
   value: string;
 }
 
+export interface ComboboxProps extends Omit<
+  ComponentPropsWithoutRef<"input">,
+  "value" | "onChange"
+> {
+  /** Array of options to render */
+  options: ComboboxOption[];
+  /** Current selected value */
+  value?: string;
+  /** Called when selection changes */
+  onValueChange?: (value: string) => void;
+  /** Placeholder text when no value selected */
+  placeholder?: string;
+  /** Small caption rendered above the value, matching SelectField's "inner" label placement */
+  label?: ReactNode;
+  /** Disable interaction */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+type Virtualizer = ReactVirtualizer<HTMLDivElement, Element>;
+
+function isSameOption(a: ComboboxOption, b: ComboboxOption) {
+  return a.value === b.value;
+}
+
 /**
- * Virtualized combobox component for large option lists (10,000+).
+ * Virtualized combobox component for large option lists (10,000+). Wraps
+ * Base UI's combobox primitives (accessible listbox/combobox semantics,
+ * ARIA wiring, positioning) with TanStack Virtual (windowed rendering).
  *
  * Features:
  * - Type-to-filter with instant input responsiveness via useDeferredValue
@@ -45,31 +72,6 @@ export interface ComboboxOption {
  * />
  * ```
  */
-export interface ComboboxProps extends Omit<
-  ComponentPropsWithoutRef<"input">,
-  "value" | "onChange"
-> {
-  /** Array of options to render */
-  options: ComboboxOption[];
-  /** Current selected value */
-  value?: string;
-  /** Called when selection changes */
-  onValueChange?: (value: string) => void;
-  /** Placeholder text when no value selected */
-  placeholder?: string;
-  /** Small caption rendered above the value, matching SelectField's "inner" label placement */
-  label?: ReactNode;
-  /** Disable interaction */
-  disabled?: boolean;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-/** Builds the id of a listbox option, shared between the input's aria-activedescendant and the option element. */
-function getOptionId(listboxId: string, index: number) {
-  return `${listboxId}-option-${index}`;
-}
-
 export function Combobox({
   options,
   value = "",
@@ -81,373 +83,268 @@ export function Combobox({
   ...inputProps
 }: ComboboxProps) {
   const [open, setOpen] = useState(false);
-  const [filterInput, setFilterInput] = useState("");
-  const [focusedIndex, setFocusedIndex] = useState(0);
-  const listboxId = useId();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const navigationSourceRef = useRef<"keyboard" | "mouse">("mouse");
+  const [filterText, setFilterText] = useState("");
+  const virtualizerRef = useRef<Virtualizer | null>(null);
+  // Anchors the popup to the whole bordered control (input + trigger
+  // button), matching SelectTrigger's width. Base UI's own default anchor
+  // is just the Input, which is narrower.
+  const triggerRef = useRef<HTMLDivElement>(null);
+  // The virtualizer must measure Combobox.List itself (the bounded,
+  // overflow-y-auto viewport) — not the inner spacer div, which is
+  // deliberately as tall as the full option list. Measuring the spacer
+  // reports its own (huge) height as the "visible" viewport, so the
+  // virtualizer concludes almost every item is visible and renders
+  // thousands of real DOM nodes instead of ~20.
+  const scrollElementRef = useRef<HTMLDivElement | null>(null);
+  const handleScrollElementRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      scrollElementRef.current = element;
+      if (element) virtualizerRef.current?.measure();
+    },
+    [],
+  );
 
   // Defer filtered list rendering to keep input responsive during filtering
-  const deferredFilter = useDeferredValue(filterInput);
+  const deferredFilter = useDeferredValue(filterText);
 
-  // Filter options via substring match (case-insensitive)
   const filteredOptions = useMemo(() => {
     const lowerFilter = deferredFilter.toLowerCase();
     if (!lowerFilter) return options;
     return options.filter(opt => opt.label.toLowerCase().includes(lowerFilter));
   }, [deferredFilter, options]);
 
-  const selectedOption = options.find(opt => opt.value === value);
-  const triggerRef = useRef<HTMLDivElement>(null);
-
-  const handleSelect = useCallback(
-    (selectedValue: string) => {
-      onValueChange?.(selectedValue);
-      setOpen(false);
-      setFilterInput("");
-    },
-    [onValueChange],
-  );
-
-  // Close dropdown when clicking outside the combobox
-  useEffect(() => {
-    if (!open) return;
-
-    const handleClickOutside = (e: MouseEvent) => {
-      const target = e.target as Node;
-      // Check if click is outside the trigger
-      if (triggerRef.current && !triggerRef.current.contains(target)) {
-        // Also check if it's not clicking on the listbox (portal) or scrollbar
-        const listbox = document.getElementById(listboxId);
-        if (!listbox || !listbox.contains(target)) {
-          setOpen(false);
-          setFilterInput("");
-        }
-      }
-    };
-
-    // Use capture phase to detect clicks before other handlers
-    document.addEventListener("mousedown", handleClickOutside, true);
-    return () =>
-      document.removeEventListener("mousedown", handleClickOutside, true);
-  }, [open, listboxId]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      // VoiceOver's built-in combobox hint tells users to press
-      // Control-Option-Space to show the list. That gesture isn't bound to
-      // anything by default, so on macOS the Option modifier types a literal
-      // non-breaking space into the field instead. Honor the hint directly
-      // and swallow the keystroke so it can't leak into the filter text.
-      if (e.ctrlKey && e.altKey && e.code === "Space") {
-        e.preventDefault();
-        if (!open) {
-          navigationSourceRef.current = "keyboard";
-          setOpen(true);
-          setFocusedIndex(0);
-        }
-        return;
-      }
-
-      if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-        navigationSourceRef.current = "keyboard";
-        setOpen(true);
-        setFocusedIndex(0);
-        return;
-      }
-
-      if (!open) return;
-
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault();
-          navigationSourceRef.current = "keyboard";
-          setFocusedIndex(prev =>
-            prev < filteredOptions.length - 1 ? prev + 1 : 0,
-          );
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          navigationSourceRef.current = "keyboard";
-          setFocusedIndex(prev =>
-            prev > 0 ? prev - 1 : filteredOptions.length - 1,
-          );
-          break;
-        case "Enter":
-        case " ":
-          e.preventDefault();
-          if (filteredOptions[focusedIndex]) {
-            handleSelect(filteredOptions[focusedIndex].value);
-          }
-          break;
-        case "Escape":
-          e.preventDefault();
-          setOpen(false);
-          setFilterInput("");
-          break;
-      }
-    },
-    [open, filteredOptions, focusedIndex, handleSelect],
-  );
+  const selectedOption = options.find(opt => opt.value === value) ?? null;
+  // Mirrors the closed-state label until the user types, without needing a
+  // separate "display value" prop on Base UI's fully-controlled Input.
+  const inputValue = filterText || (selectedOption?.label ?? "");
 
   return (
     <div className={cn("relative w-full", className)}>
-      {/* Trigger / Input */}
-      <div
-        ref={triggerRef}
-        className={cn(
-          "ring-offset-background border-input-border bg-input-background text-foreground placeholder:text-muted-foreground focus-within:border-primary data-open:border-primary",
-          "flex w-full items-center justify-between rounded-md border text-sm whitespace-nowrap shadow-xs transition-colors duration-100",
-          label ? "h-11 px-3 py-1" : "h-10 px-3 py-2",
-          "focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          open && "border-primary",
-        )}
+      <BaseCombobox.Root
+        items={options}
+        filteredItems={filteredOptions}
+        isItemEqualToValue={isSameOption}
+        value={selectedOption}
+        onValueChange={next => onValueChange?.(next ? next.value : "")}
+        inputValue={inputValue}
+        onInputValueChange={next => {
+          setFilterText(next);
+          setOpen(true);
+        }}
+        open={open}
+        onOpenChange={(nextOpen, eventDetails) => {
+          // Blur alone never closes the list (matches the previously
+          // validated behavior, where only Escape, an outside click, or a
+          // selection did); only "not on focus" governs opening.
+          if (!nextOpen && eventDetails.reason === "focus-out") return;
+          setOpen(nextOpen);
+          // Single reset point for the filter, covering every other close
+          // reason (Escape, outside click, selection) instead of scattering
+          // `setFilterText("")` across individual handlers.
+          if (!nextOpen) setFilterText("");
+        }}
+        onItemHighlighted={(_item, { reason, index }) => {
+          // Keyboard navigation scrolls the active item into view; mouse
+          // hover only highlights it, matching the previously validated
+          // behavior (fixed across several rounds of manual testing).
+          if (reason !== "keyboard") return;
+          virtualizerRef.current?.scrollToIndex(index, { align: "center" });
+        }}
+        disabled={disabled}
       >
-        <div className="flex min-w-0 flex-1 flex-col items-start justify-center gap-0">
-          {label ? (
-            <span className="text-muted-foreground text-xs leading-none">
-              {label}
-            </span>
-          ) : null}
-          <input
-            ref={inputRef}
-            {...inputProps}
-            type="text"
-            disabled={disabled}
-            placeholder={!selectedOption ? placeholder : ""}
-            className="placeholder:text-muted-foreground w-full bg-transparent outline-hidden"
-            value={filterInput || (selectedOption?.label ?? "")}
-            onChange={e => {
-              setFilterInput(e.currentTarget.value);
-              setFocusedIndex(0);
-              setOpen(true);
-            }}
-            onClick={() => {
-              // A <button> has "click" as its native default action, which is
-              // what VoiceOver's Control-Option-Space reliably triggers (this
-              // is how the button-based Select/SelectField opens under
-              // VoiceOver). A text input has no such default action, so give
-              // it an explicit one instead of relying on VoiceOver to infer
-              // it. Only open, never toggle closed: closing on a second click
-              // would fight repositioning the cursor while typing.
-              if (!open) {
-                navigationSourceRef.current = "keyboard";
-                setOpen(true);
-                setFocusedIndex(0);
-              }
-            }}
-            onKeyDown={handleKeyDown}
-            aria-expanded={open}
-            aria-autocomplete="list"
-            aria-controls={open ? listboxId : undefined}
-            aria-activedescendant={
-              open && filteredOptions[focusedIndex]
-                ? getOptionId(listboxId, focusedIndex)
-                : undefined
-            }
-            role="combobox"
-          />
-        </div>
-        <button
-          type="button"
-          disabled={disabled}
-          onClick={() => setOpen(!open)}
-          // Purely a decorative, mouse/touch-only affordance, like the arrow
-          // on a native <select>: ArrowDown on the input already opens the
-          // list. Excluding it from the accessibility tree (not just the Tab
-          // order) keeps screen readers from seeing the trigger as a group
-          // of two controls to interact with — VoiceOver in particular reads
-          // Control-Option-Space on a grouped control as "stop interacting
-          // with this group" and pops focus off the input instead of opening
-          // the list.
-          tabIndex={-1}
-          aria-hidden="true"
-          className="hover:bg-input-background ml-2 shrink-0 p-1 disabled:cursor-not-allowed"
+        <div
+          ref={triggerRef}
+          className={cn(
+            "ring-offset-background border-input-border bg-input-background text-foreground placeholder:text-muted-foreground focus-within:border-primary data-open:border-primary",
+            "flex w-full items-center justify-between rounded-md border text-sm whitespace-nowrap shadow-xs transition-colors duration-100",
+            label ? "h-11 px-3 py-1" : "h-10 px-3 py-2",
+            "focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            open && "border-primary",
+          )}
         >
-          <ChevronDownIcon
-            className={cn(
-              "size-5 transition-transform duration-200",
-              open && "rotate-180",
-            )}
+          <div className="flex min-w-0 flex-1 flex-col items-start justify-center gap-0">
+            {label ? (
+              <span className="text-muted-foreground text-xs leading-none">
+                {label}
+              </span>
+            ) : null}
+            <BaseCombobox.Input
+              {...inputProps}
+              disabled={disabled}
+              placeholder={!selectedOption ? placeholder : ""}
+              className="placeholder:text-muted-foreground w-full bg-transparent outline-hidden"
+              onClick={() => {
+                // A <button> has "click" as its native default action, which
+                // is what VoiceOver's Control-Option-Space reliably triggers
+                // (this is how the button-based Select/SelectField opens
+                // under VoiceOver). A text input has no such default action,
+                // so give it an explicit one instead of relying on Base UI's
+                // pointer-based open detection to recognize a synthetic
+                // click. Only open, never toggle closed: closing on a
+                // second click would fight repositioning the cursor while
+                // typing.
+                if (!open) setOpen(true);
+              }}
+              onKeyDown={e => {
+                // VoiceOver's built-in combobox hint tells users to press
+                // Control-Option-Space to show the list. That gesture isn't
+                // bound to anything by default, so on macOS the Option
+                // modifier types a literal non-breaking space into the
+                // field instead. Honor the hint directly and swallow the
+                // keystroke so it can't leak into the filter text.
+                if (e.ctrlKey && e.altKey && e.code === "Space") {
+                  e.preventDefault();
+                  setOpen(true);
+                }
+              }}
+            />
+          </div>
+          <BaseCombobox.Trigger
+            disabled={disabled}
+            // Purely a decorative, mouse/touch-only affordance, like the
+            // arrow on a native <select>: ArrowDown on the input already
+            // opens the list. Excluding it from the accessibility tree (not
+            // just the Tab order) keeps screen readers from seeing the
+            // trigger as a group of two controls to interact with —
+            // VoiceOver in particular reads Control-Option-Space on a
+            // grouped control as "stop interacting with this group" and
+            // pops focus off the input instead of opening the list. Base
+            // UI's own Trigger (rather than a hand-rolled button) is what
+            // makes a second click reliably close the list instead of
+            // racing the library's own open-state handling.
+            tabIndex={-1}
             aria-hidden="true"
-          />
-        </button>
-      </div>
+            className="hover:bg-input-background ml-2 shrink-0 p-1 disabled:cursor-not-allowed"
+          >
+            <BaseCombobox.Icon>
+              <ChevronDownIcon
+                className={cn(
+                  "size-5 transition-transform duration-200",
+                  open && "rotate-180",
+                )}
+                aria-hidden="true"
+              />
+            </BaseCombobox.Icon>
+          </BaseCombobox.Trigger>
+        </div>
 
-      {/* Dropdown listbox via Portal */}
-      {open
-        ? createPortal(
-            <>
-              {filteredOptions.length > 0 ? (
-                <ListContent
-                  listboxId={listboxId}
-                  options={filteredOptions}
-                  onSelect={handleSelect}
-                  triggerRef={triggerRef}
-                  focusedIndex={focusedIndex}
-                  setFocusedIndex={setFocusedIndex}
-                  value={value}
-                  navigationSourceRef={navigationSourceRef}
-                />
-              ) : (
-                <NoResultsPopover triggerRef={triggerRef} />
+        <BaseCombobox.Portal>
+          <BaseCombobox.Positioner
+            anchor={triggerRef}
+            className="z-menu outline-none"
+            sideOffset={4}
+          >
+            <BaseCombobox.Popup
+              className={cn(
+                "bg-background text-foreground border-input-border",
+                // No duration-* override: matches SelectContent's entrance
+                // (tw-animate-css's 150ms default). The 300ms this used to
+                // carry made the list feel twice as slow to appear as every
+                // other dropdown in the app.
+                "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 origin-(--transform-origin) transition-none",
+                "max-h-96 w-(--anchor-width) overflow-hidden rounded-md border shadow-md",
               )}
-            </>,
-            document.body,
-          )
-        : null}
-    </div>
-  );
-}
-
-function NoResultsPopover({
-  triggerRef,
-}: {
-  triggerRef: React.RefObject<HTMLDivElement | null>;
-}) {
-  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
-
-  useLayoutEffect(() => {
-    if (!triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    setPos({
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: rect.width,
-    });
-  }, [triggerRef]);
-
-  return (
-    <div
-      className="bg-background text-foreground border-input-border text-muted-foreground fixed z-50 rounded-md border p-3 text-center text-sm shadow-md"
-      style={{
-        top: `${pos.top}px`,
-        left: `${pos.left}px`,
-        width: `${pos.width}px`,
-      }}
-    >
-      No results found
+            >
+              <BaseCombobox.Empty
+                // Base UI keeps this element mounted at all times (even with
+                // results) so screen readers get consistent live-region
+                // announcements — only its children are conditional. Left
+                // unguarded, its own p-3 still reserves ~24px above the
+                // list even when there's nothing inside it to show.
+                className="text-muted-foreground p-3 text-center text-sm empty:p-0"
+              >
+                No results found
+              </BaseCombobox.Empty>
+              <BaseCombobox.List
+                ref={handleScrollElementRef}
+                className="max-h-96 overflow-x-hidden overflow-y-auto"
+              >
+                <VirtualizedOptions
+                  virtualizerRef={virtualizerRef}
+                  scrollElementRef={scrollElementRef}
+                />
+              </BaseCombobox.List>
+            </BaseCombobox.Popup>
+          </BaseCombobox.Positioner>
+        </BaseCombobox.Portal>
+      </BaseCombobox.Root>
     </div>
   );
 }
 
 /**
- * Virtualized list content using TanStack Virtual.
- * Only renders visible items (~20 DOM nodes), even with 10,000+ options.
+ * Renders only the visible options (~20 DOM nodes), even with 10,000+
+ * options. Must be a descendant of Combobox.Root to reach filtered items via
+ * context; that's also why the virtualizer instance is exposed through a
+ * ref instead of living in the parent scope.
  */
-function ListContent({
-  listboxId,
-  options,
-  onSelect,
-  triggerRef,
-  focusedIndex,
-  setFocusedIndex,
-  value,
-  navigationSourceRef,
+function VirtualizedOptions({
+  virtualizerRef,
+  scrollElementRef,
 }: {
-  listboxId: string;
-  options: ComboboxOption[];
-  onSelect: (value: string) => void;
-  triggerRef: React.RefObject<HTMLDivElement | null>;
-  focusedIndex: number;
-  setFocusedIndex: (index: number) => void;
-  value: string;
-  navigationSourceRef: React.RefObject<"keyboard" | "mouse">;
+  virtualizerRef: React.RefObject<Virtualizer | null>;
+  scrollElementRef: React.RefObject<HTMLDivElement | null>;
 }) {
-  const parentRef = useRef<HTMLDivElement>(null);
-  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
-
-  useLayoutEffect(() => {
-    if (!triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    setPos({
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: rect.width,
-    });
-  }, [triggerRef]);
+  const filteredOptions = BaseCombobox.useFilteredItems<ComboboxOption>();
 
   // eslint-disable-next-line react-compiler/incompatible-library
   const virtualizer = useVirtualizer({
-    count: options.length,
-    getScrollElement: () => parentRef.current,
+    count: filteredOptions.length,
+    getScrollElement: () => scrollElementRef.current,
     estimateSize: () => 40, // ~40px per item
     overscan: 5, // Render 5 items outside visible area for smoother scroll
   });
 
-  const virtualItems = virtualizer.getVirtualItems();
-  const totalSize = virtualizer.getTotalSize();
+  useImperativeHandle(virtualizerRef, () => virtualizer);
 
-  // Scroll focused item into view when keyboard navigating (not on mouse hover)
+  // Combobox.List (the real scrollable viewport) mounts in the same commit
+  // as this component, so scrollElementRef is already populated by the time
+  // this runs — force a measurement against its real dimensions instead of
+  // waiting for a resize-observer tick.
   useLayoutEffect(() => {
-    if (focusedIndex >= 0 && navigationSourceRef.current === "keyboard") {
-      virtualizer.scrollToIndex(focusedIndex, { align: "center" });
-    }
-  }, [focusedIndex, virtualizer]);
+    virtualizer.measure();
+  }, [virtualizer]);
+
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
 
   return (
     <div
-      ref={parentRef}
-      id={listboxId}
-      className="bg-background text-foreground border-input-border animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 fixed z-50 max-h-96 origin-top overflow-x-hidden overflow-y-auto rounded-md border shadow-md transition-none duration-300"
-      style={{
-        top: `${pos.top}px`,
-        left: `${pos.left}px`,
-        width: `${pos.width}px`,
-      }}
-      role="listbox"
+      role="presentation"
+      style={{ height: `${totalSize}px`, position: "relative" }}
     >
-      {/* Virtual container for absolutely positioned items */}
-      <div
-        style={{
-          height: `${totalSize}px`,
-          width: "100%",
-          position: "relative",
-        }}
-      >
-        {virtualItems.map(virtualItem => {
-          const option = options[virtualItem.index];
-          return (
-            <button
-              key={virtualItem.key}
-              id={getOptionId(listboxId, virtualItem.index)}
-              onClick={() => onSelect(option.value)}
-              onMouseEnter={() => {
-                navigationSourceRef.current = "mouse";
-                setFocusedIndex(virtualItem.index);
-              }}
-              type="button"
-              // Virtual focus: DOM focus stays on the combobox input, which
-              // tracks the active option via aria-activedescendant. Excluding
-              // these from the Tab sequence keeps the list from being
-              // tabbed through item by item.
-              tabIndex={-1}
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: `${virtualItem.size}px`,
-                transform: `translateY(${virtualItem.start}px)`,
-              }}
-              className={cn(
-                "flex w-full cursor-pointer items-center justify-between px-3 py-2 text-left text-sm outline-hidden transition-colors duration-100",
-                "text-foreground",
-                "hover:bg-primary-subtle",
-                "focus-visible:bg-primary-subtle",
-                virtualItem.index === focusedIndex && "bg-primary-subtle",
-              )}
-              role="option"
-              aria-selected={option.value === value}
-            >
-              <span className="block truncate">{option.label}</span>
-              {option.value === value && (
-                <span className="ml-2 shrink-0 font-semibold">✓</span>
-              )}
-            </button>
-          );
-        })}
-      </div>
+      {virtualItems.map(virtualItem => {
+        const option = filteredOptions[virtualItem.index];
+        if (!option) return null;
+
+        return (
+          <BaseCombobox.Item
+            key={virtualItem.key}
+            index={virtualItem.index}
+            value={option}
+            tabIndex={-1}
+            aria-setsize={filteredOptions.length}
+            aria-posinset={virtualItem.index + 1}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: virtualItem.size,
+              transform: `translateY(${virtualItem.start}px)`,
+            }}
+            className={cn(
+              "text-foreground data-highlighted:bg-primary-subtle",
+              "flex w-full cursor-pointer items-center justify-between px-3 py-2 text-left text-sm outline-hidden transition-colors duration-100",
+            )}
+          >
+            <span className="block truncate">{option.label}</span>
+            <BaseCombobox.ItemIndicator className="ml-2 shrink-0 font-semibold">
+              ✓
+            </BaseCombobox.ItemIndicator>
+          </BaseCombobox.Item>
+        );
+      })}
     </div>
   );
 }
diff --git a/packages/graph-explorer/src/core/StateProvider/displayTypeConfigs.ts b/packages/graph-explorer/src/core/StateProvider/displayTypeConfigs.ts
index ee62ec113..0bb5297af 100644
--- a/packages/graph-explorer/src/core/StateProvider/displayTypeConfigs.ts
+++ b/packages/graph-explorer/src/core/StateProvider/displayTypeConfigs.ts
@@ -1,7 +1,7 @@
 import { atom, useAtomValue } from "jotai";
 import { atomFamily } from "jotai-family";
 import { useAtomCallback } from "jotai/utils";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 
 import {
   activeSchemaAtom,
@@ -86,28 +86,36 @@ export function useDisplayEdgeTypeConfigs() {
  */
 export function useSearchableAttributes(type: string) {
   const displayTypeConfigs = useDisplayVertexTypeConfigs();
-  const includeAllTypes = type === SEARCH_TOKENS.ALL_VERTEX_TYPES;
 
-  const alreadyAdded = new Set<string>();
-  const results: DisplayConfigAttribute[] = [];
+  // React Compiler doesn't stabilize this on its own: without this useMemo,
+  // useKeywordSearch's own memoized attribute options recompute every
+  // render because their dependency here changes identity each time.
+  // Referential stability is a tested contract (see "useSearchableAttributes
+  // referential stability" in useKeywordSearch.test.ts), not a guess.
+  return useMemo(() => {
+    const includeAllTypes = type === SEARCH_TOKENS.ALL_VERTEX_TYPES;
 
-  for (const [, value] of displayTypeConfigs) {
-    if (!includeAllTypes && value.type !== type) {
-      continue;
-    }
-    for (const attr of value.attributes) {
-      if (!attr.isSearchable || alreadyAdded.has(attr.name)) {
+    const alreadyAdded = new Set<string>();
+    const results: DisplayConfigAttribute[] = [];
+
+    for (const [, value] of displayTypeConfigs) {
+      if (!includeAllTypes && value.type !== type) {
         continue;
       }
-      alreadyAdded.add(attr.name);
-      results.push(attr);
+      for (const attr of value.attributes) {
+        if (!attr.isSearchable || alreadyAdded.has(attr.name)) {
+          continue;
+        }
+        alreadyAdded.add(attr.name);
+        results.push(attr);
+      }
     }
-  }
 
-  // Sort by name
-  return results.toSorted((a, b) =>
-    a.displayLabel.localeCompare(b.displayLabel),
-  );
+    // Sort by name
+    return results.toSorted((a, b) =>
+      a.displayLabel.localeCompare(b.displayLabel),
+    );
+  }, [displayTypeConfigs, type]);
 }
 
 /** Gets the matching vertex type config or a generated default value. */
diff --git a/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.test.ts b/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.test.ts
index b59fa9d9e..b7b61523a 100644
--- a/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.test.ts
+++ b/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.test.ts
@@ -2,6 +2,7 @@
 import type { QueryEngine } from "@shared/types";
 
 import { act } from "@testing-library/react";
+import { useState } from "react";
 import { vi } from "vitest";
 
 import {
@@ -9,6 +10,7 @@ import {
   type AppStore,
   configurationAtom,
   schemaAtom,
+  useSearchableAttributes,
 } from "@/core";
 import { SEARCH_TOKENS } from "@/utils";
 import {
@@ -306,4 +308,67 @@ describe("useKeywordSearch", () => {
       );
     });
   });
+
+  describe("useSearchableAttributes referential stability", () => {
+    function useSearchableAttributesHarness(initialType: string) {
+      const [type, setType] = useState(initialType);
+      const attributes = useSearchableAttributes(type);
+      return { attributes, setType };
+    }
+
+    function initializeConfigWithTwoVertexTypes(store: AppStore) {
+      const config = createRandomRawConfiguration();
+      const schema = createRandomSchema();
+      config.connection!.queryEngine = "gremlin";
+      schema.vertices[0].attributes = [
+        { name: "city", dataType: "String" },
+        { name: "code", dataType: "String" },
+      ];
+      schema.vertices[1].attributes = [{ name: "airline", dataType: "String" }];
+
+      store.set(configurationAtom, new Map([[config.id, config]]));
+      store.set(schemaAtom, new Map([[config.id, schema]]));
+      store.set(activeConfigurationAtom, config.id);
+
+      return {
+        vertexType1: schema.vertices[0].type,
+        vertexType2: schema.vertices[1].type,
+      };
+    }
+
+    it("returns the same array reference across renders when the vertex type is unchanged", () => {
+      let vertexType1 = "";
+      const { result, rerender } = renderHookWithJotai(
+        () => useSearchableAttributesHarness(vertexType1),
+        store => {
+          vertexType1 = initializeConfigWithTwoVertexTypes(store).vertexType1;
+        },
+      );
+
+      const firstAttributes = result.current.attributes;
+      rerender();
+
+      expect(result.current.attributes).toBe(firstAttributes);
+    });
+
+    it("returns a new array reference when the vertex type changes", () => {
+      let vertexType1 = "";
+      let vertexType2 = "";
+      const { result } = renderHookWithJotai(
+        () => useSearchableAttributesHarness(vertexType1),
+        store => {
+          ({ vertexType1, vertexType2 } =
+            initializeConfigWithTwoVertexTypes(store));
+        },
+      );
+
+      const firstAttributes = result.current.attributes;
+      act(() => result.current.setType(vertexType2));
+
+      expect(result.current.attributes).not.toBe(firstAttributes);
+      expect(result.current.attributes.map(attr => attr.name)).toStrictEqual([
+        "airline",
+      ]);
+    });
+  });
 });
diff --git a/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts b/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts
index 9d83b4785..b6a4df266 100644
--- a/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts
+++ b/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts
@@ -30,7 +30,8 @@ function useAttributeOptions(selectedVertexType: string) {
   const queryEngine = useQueryEngine();
   const t = useTranslations();
 
-  // Call hook directly (not inside memoization callback)
+  // Rules of hooks forbid calling a hook inside the useMemo callback below,
+  // so useSearchableAttributes runs here and only the derived array is memoized.
   const allSearchableAttributes = useSearchableAttributes(selectedVertexType);
 
   const options: SelectOption[] = useMemo(() => {

From 87f0a5205d53da4f8a13b0cfdbff2f3cc4d2560f Mon Sep 17 00:00:00 2001
From: Mario Juarros <juarros74@hotmail.com>
Date: Mon, 17 Aug 2026 13:01:28 -0600
Subject: [PATCH 4/7] Fix Combobox virtualized keyboard navigation, state bugs,
 and accessibility issues

The virtualized prop was missing from BaseCombobox.Root, silently bounding
keyboard navigation to whatever was mounted in the DOM window instead of
the full option count. Open/filter state was smeared across handlers that
didn't distinguish typed input from Base UI's own programmatic syncs,
causing stale display text and a popup that never closed on focus-out.
The toggle button is no longer hidden from the accessibility tree: when
the input already has a value, VoiceOver's Read-All treats it as content
to read and skips announcing its combobox role, so the button is what
re-announces it in that case.

Also fixes popup sizing/animation, prop passthrough safety, filtering
efficiency, and several tests that didn't assert what they claimed.
---
 .../src/components/Combobox.test.tsx          | 384 ++++++++----------
 .../src/components/Combobox.tsx               | 194 +++++----
 .../src/routes/DataExplorer/DataExplorer.tsx  |   4 +-
 3 files changed, 289 insertions(+), 293 deletions(-)

diff --git a/packages/graph-explorer/src/components/Combobox.test.tsx b/packages/graph-explorer/src/components/Combobox.test.tsx
index 6fe1a8040..cacdf2060 100644
--- a/packages/graph-explorer/src/components/Combobox.test.tsx
+++ b/packages/graph-explorer/src/components/Combobox.test.tsx
@@ -3,14 +3,15 @@
  *
  * Combobox Component Tests
  *
- * Focus: Behavior-based tests at realistic scales (500, 5,000, 10,000 items)
+ * Focus: Behavior-based tests at realistic scales (10, 20, 10,000 items)
  * No DOM node count assertions (virtualization is an implementation detail)
  *
  * Run: pnpm test Combobox.test.tsx
  */
 
 import { render, fireEvent, waitFor } from "@testing-library/react";
-import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, beforeEach, vi } from "vitest";
 
 import { Combobox, type ComboboxOption } from "./Combobox";
 
@@ -40,10 +41,6 @@ beforeEach(() => {
   );
 });
 
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-
 // Helper: Create test options
 function createTestOptions(count: number): ComboboxOption[] {
   const options: ComboboxOption[] = [];
@@ -85,7 +82,10 @@ describe("Combobox", () => {
       );
 
       const input = getByPlaceholderText("Select type");
-      expect(input).toBeTruthy();
+      expect(input.getAttribute("role")).toBe("combobox");
+      expect(input.getAttribute("aria-expanded")).toBe("false");
+      expect(input.getAttribute("aria-haspopup")).toBe("listbox");
+      expect(input.getAttribute("aria-autocomplete")).toBe("list");
     });
 
     it("should render an inner label above the value, matching SelectField", () => {
@@ -127,6 +127,15 @@ describe("Combobox", () => {
       const input = container.querySelector("input") as HTMLInputElement;
       expect(getByLabelText("Node type")).toBe(input);
     });
+
+    it("should associate its inner caption with the input via aria-labelledby", () => {
+      const options = createTestOptions(10);
+      const { getByLabelText } = render(
+        <Combobox options={options} value="type_5" label="Node type" />,
+      );
+
+      expect(getByLabelText("Node type")).toBeTruthy();
+    });
   });
 
   describe("Interaction & Selection", () => {
@@ -166,29 +175,33 @@ describe("Combobox", () => {
       expect(input.getAttribute("aria-expanded")).toBe("true");
     });
 
-    it("should filter options on typing", () => {
+    it("should filter options on typing", async () => {
       const options = createTestOptions(20);
       const { container } = render(
         <Combobox options={options} placeholder="Select type" />,
       );
 
       const input = container.querySelector("input") as HTMLInputElement;
-      fireEvent.focus(input);
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      const unfilteredCount =
+        document.querySelectorAll('[role="option"]').length;
+      expect(unfilteredCount).toBeGreaterThan(1);
 
-      // Type to filter
       fireEvent.change(input, { target: { value: "00010" } });
       expect(input.value).toBe("00010");
 
-      // Verify input shows the filter text
-      expect(input.value).toBe("00010");
-      expect(input.getAttribute("aria-expanded")).toBe("true");
+      await waitFor(() => {
+        const filteredOptions = document.querySelectorAll('[role="option"]');
+        expect(filteredOptions.length).toBe(1);
+        expect(filteredOptions[0].textContent).toBe("Vertex Type 00010");
+      });
     });
 
-    it("should handle selection callbacks", () => {
+    it("should call onValueChange when an option is selected", async () => {
       const options = createTestOptions(10);
       const handleChange = vi.fn();
 
-      const { container } = render(
+      const { container, findByText } = render(
         <Combobox
           options={options}
           placeholder="Select type"
@@ -197,36 +210,46 @@ describe("Combobox", () => {
       );
 
       const input = container.querySelector("input") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "00005" } });
 
-      // Typing opens the dropdown and filters
-      fireEvent.change(input, { target: { value: "type_0" } });
+      const option = await findByText("Vertex Type 00005");
+      fireEvent.click(option);
 
-      // Verify dropdown is open
-      expect(input.getAttribute("aria-expanded")).toBe("true");
-      expect(input.value).toBe("type_0");
+      expect(handleChange).toHaveBeenCalledWith("type_5");
     });
 
-    it("should reset filter on reopen", () => {
+    it("should reset the filter and close when focus leaves for another field", async () => {
+      // Regression test: tabbing away from the combobox to a sibling field
+      // (e.g. the other Search Sidebar picker) must actually close the
+      // popup. A bare fireEvent.blur() doesn't move jsdom's real focus
+      // target, so this uses real .focus() calls to produce the same
+      // blur+focusout sequence a browser fires when Tab moves focus; Base
+      // UI's own dismiss handling reacts to that outside of React's act(),
+      // so the resulting close is asserted asynchronously.
       const options = createTestOptions(10);
-      const { container } = render(
-        <Combobox options={options} placeholder="Select type" />,
+      const { container, getByTestId } = render(
+        <div>
+          <Combobox options={options} placeholder="Select type" />
+          <button data-testid="next-field">Next field</button>
+        </div>,
       );
 
       const input = container.querySelector("input") as HTMLInputElement;
+      const nextField = getByTestId("next-field");
 
-      // First open + filter
-      fireEvent.focus(input);
+      input.focus();
       fireEvent.change(input, { target: { value: "00005" } });
       expect(input.value).toBe("00005");
 
-      // Close - filter should reset after blur
-      fireEvent.blur(input);
+      nextField.focus();
+      await waitFor(() => {
+        expect(input.getAttribute("aria-expanded")).toBe("false");
+        expect(input.value).toBe("");
+      });
 
-      // Reopen
+      // Reopening starts clean
       fireEvent.focus(input);
-
-      // Input should show selected value (or placeholder if no value)
-      // This confirms the filter was cleared internally
+      fireEvent.keyDown(input, { key: "ArrowDown" });
       expect(input.getAttribute("aria-expanded")).toBe("true");
     });
   });
@@ -316,21 +339,85 @@ describe("Combobox", () => {
       });
     });
 
-    it("should hide the decorative toggle button from the accessibility tree while keeping it clickable", () => {
+    it("should close on Escape", () => {
       const options = createTestOptions(10);
       const { container } = render(
         <Combobox options={options} placeholder="Select type" />,
       );
 
-      // Not exposed to screen readers at all (not just excluded from Tab):
-      // a native <select>'s arrow is decorative in the same way, and
-      // VoiceOver reads Control-Option-Space on a grouped control (input +
-      // a second focusable/AX-visible button) as "stop interacting with
-      // this group" rather than "open the list" if the button stays exposed.
+      const input = container.querySelector("input") as HTMLInputElement;
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      expect(input.getAttribute("aria-expanded")).toBe("true");
+
+      fireEvent.keyDown(input, { key: "Escape" });
+      expect(input.getAttribute("aria-expanded")).toBe("false");
+    });
+
+    it("should select the highlighted option with ArrowDown then Enter", async () => {
+      const options = createTestOptions(10);
+      const handleChange = vi.fn();
+      const user = userEvent.setup();
+
+      const { container } = render(
+        <Combobox
+          options={options}
+          placeholder="Select type"
+          onValueChange={handleChange}
+        />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+      await user.click(input);
+      await user.keyboard("{ArrowDown}{Enter}");
+
+      expect(handleChange).toHaveBeenCalledWith("type_0");
+    });
+
+    it("should navigate well past the virtualized render window with the keyboard", () => {
+      // Regression test: without Base UI's `virtualized` prop, CompositeList
+      // truncates its internal ref list to only the ~13 currently-mounted
+      // rows on every scroll remount, and useListNavigation's max index is
+      // bounded by that truncated length — so arrowing far past the window
+      // silently wraps back inside it instead of tracking the real option.
+      // jsdom doesn't implement real scrolling, so the highlighted item's
+      // DOM node isn't reliably present here; the ID Base UI assigns it
+      // (`<input id>-<index>`) is the part that's actually under test.
+      const largeOptions = createTestOptions(10000);
+      const { container } = render(
+        <Combobox options={largeOptions} placeholder="Select type" />,
+      );
+
+      const input = container.querySelector("input") as HTMLInputElement;
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+
+      const stepsPastTheWindow = 60;
+      for (let i = 0; i < stepsPastTheWindow; i++) {
+        fireEvent.keyDown(input, { key: "ArrowDown" });
+      }
+
+      // The first ArrowDown highlights index 0, so `stepsPastTheWindow` more
+      // presses lands on that same index.
+      expect(input.getAttribute("aria-activedescendant")).toBe(
+        `${input.id}-${stepsPastTheWindow}`,
+      );
+    });
+
+    it("should keep the toggle button in the accessibility tree, though not the tab order", () => {
+      const options = createTestOptions(10);
+      const { container } = render(
+        <Combobox options={options} placeholder="Select type" />,
+      );
+
+      // Exposed to screen readers (unlike an aria-hidden version): when the
+      // input already has a value, VoiceOver's Read-All treats a filled
+      // text input as content to read and skips announcing its combobox
+      // role — this button is what re-announces "combo box" in that case.
+      // Still not a Tab stop, matching Base UI's own Trigger default
+      // (ArrowDown on the input already opens the list).
       const toggleButton = container.querySelector(
         "button",
       ) as HTMLButtonElement;
-      expect(toggleButton.getAttribute("aria-hidden")).toBe("true");
+      expect(toggleButton.getAttribute("aria-hidden")).toBeNull();
       expect(toggleButton.tabIndex).toBe(-1);
 
       const input = container.querySelector("input") as HTMLInputElement;
@@ -346,7 +433,7 @@ describe("Combobox", () => {
       // this same trigger closed"). A bare fireEvent.click skips that
       // sequence and can't exercise the toggle-closed path. userEvent.click
       // doesn't work either here — it never registers the initial open on
-      // this aria-hidden decorative button — so this dispatches the raw
+      // this decorative button — so this dispatches the raw
       // pointer/mouse sequence directly instead.
       const options = createTestOptions(10);
       const { container } = render(
@@ -415,199 +502,56 @@ describe("Combobox", () => {
 
       fireEvent.focus(input);
 
-      // List should not appear
-      const listbox = container.querySelector('[role="option"]');
-      expect(listbox).toBeFalsy();
+      // List should not appear — options render through a portal into
+      // document.body, not into the render container.
+      expect(document.querySelector('[role="option"]')).toBeFalsy();
     });
   });
 
-  describe("Performance at Scale", () => {
-    describe("500 options", () => {
-      let options: ComboboxOption[];
-
-      beforeEach(() => {
-        options = createTestOptions(500);
-      });
-
-      it("should mount instantly", () => {
-        const startTime = performance.now();
-        const { container } = render(
-          <Combobox options={options} placeholder="Select type" />,
-        );
-        const endTime = performance.now();
-
-        expect(container).toBeTruthy();
-        const elapsed = endTime - startTime;
-        // Mount time with 500 items should be instant
-        expect(elapsed).toBeLessThan(50);
-      });
-    });
-
-    describe("5,000 options (stress test)", () => {
-      let options: ComboboxOption[];
-
-      beforeEach(() => {
-        options = createTestOptions(5000);
-      });
-
-      it("should mount instantly without UI freeze", () => {
-        const startTime = performance.now();
-        const { container } = render(
-          <Combobox options={options} placeholder="Select type" />,
-        );
-        const endTime = performance.now();
-
-        expect(container).toBeTruthy();
-        const elapsed = endTime - startTime;
-
-        // With virtualization, should be <200ms
-        // Without virtualization (current SelectField), would be >1000ms
-        expect(elapsed).toBeLessThan(200);
-      });
-
-      it("should keep input responsive while filtering", () => {
-        const { container } = render(
-          <Combobox options={options} placeholder="Select type" />,
-        );
-
-        const input = container.querySelector("input") as HTMLInputElement;
-        fireEvent.focus(input);
-
-        // Measure input responsiveness (not filtering latency)
-        const inputStartTime = performance.now();
-        fireEvent.change(input, { target: { value: "04999" } });
-        const inputEndTime = performance.now();
-
-        // Input value should update instantly
-        expect(input.value).toBe("04999");
-
-        const inputLatency = inputEndTime - inputStartTime;
-
-        // Input should be instant (useDeferredValue protects this)
-        expect(inputLatency).toBeLessThan(50);
-      });
-
-      it("scale guardrail: input stays responsive even with 5,000 items", () => {
-        const { container } = render(
-          <Combobox
-            options={options}
-            placeholder="Select type"
-            onValueChange={vi.fn()}
-          />,
-        );
-
-        const input = container.querySelector("input") as HTMLInputElement;
-        fireEvent.focus(input);
+  describe("Performance at Scale (10,000 options)", () => {
+    it("should select a specific late item after filtering", async () => {
+      const largeOptions = createTestOptions(10000);
+      const handleChange = vi.fn();
+      const { container, findByText } = render(
+        <Combobox
+          options={largeOptions}
+          placeholder="Select type"
+          onValueChange={handleChange}
+        />,
+      );
 
-        // Filter to a late item (#4999)
-        const filterStartTime = performance.now();
-        fireEvent.change(input, { target: { value: "04999" } });
-        const filterEndTime = performance.now();
+      const input = container.querySelector("input") as HTMLInputElement;
+      fireEvent.focus(input);
+      fireEvent.change(input, { target: { value: "08500" } });
 
-        expect(input.value).toBe("04999");
-        const latency = filterEndTime - filterStartTime;
+      const option = await findByText("Vertex Type 08500");
+      fireEvent.click(option);
 
-        // useDeferredValue keeps input responsive
-        expect(latency).toBeLessThan(50);
-      });
+      expect(handleChange).toHaveBeenCalledWith("type_8500");
     });
 
-    describe("10,000 options (extreme scale)", () => {
-      it("keeps rendered option count bounded regardless of total items", () => {
-        // Not the exact-count assertion the project's testing philosophy
-        // warns against (that's about pinning an implementation detail like
-        // a specific overscan value, which breaks on harmless tuning) — this
-        // is a wide behavioral bound on whether windowing happened at all.
-        // It guards against measuring the wrong scroll element: the
-        // virtualizer must read the bounded, overflow-y-auto viewport
-        // (Combobox.List), not the inner spacer div (which is deliberately
-        // as tall as the full list). Measuring the spacer reports its own
-        // huge height as "visible", so the virtualizer renders nearly every
-        // item instead of a small window — a real regression this project
-        // shipped that jsdom's global offsetHeight/offsetWidth mock can't
-        // catch by itself, since it can't tell which element got measured.
-        const largeOptions = createTestOptions(10000);
-        const { container } = render(
-          <Combobox options={largeOptions} placeholder="Select type" />,
-        );
-
-        const input = container.querySelector("input") as HTMLInputElement;
-        fireEvent.focus(input);
-        fireEvent.keyDown(input, { key: "ArrowDown" });
-
-        // A fraction of the total, not a fixed number: the real failure
-        // mode this guards against is rendering essentially everything
-        // (the bug rendered ~10,000 of 10,000), so this stays well clear
-        // of any reasonable overscan/container-height tuning instead of
-        // coupling to today's specific values.
-        const renderedOptions = document.querySelectorAll('[role="option"]');
-        expect(renderedOptions.length).toBeGreaterThan(0);
-        expect(renderedOptions.length).toBeLessThan(largeOptions.length / 10);
-      });
-
-      it("should mount without UI freeze", () => {
-        const largeOptions = createTestOptions(10000);
-
-        const startTime = performance.now();
-        const { container } = render(
-          <Combobox options={largeOptions} placeholder="Select type" />,
-        );
-        const endTime = performance.now();
-
-        expect(container).toBeTruthy();
-        const elapsed = endTime - startTime;
+    it("should filter then select via ArrowDown and Enter", async () => {
+      const largeOptions = createTestOptions(10000);
+      const handleChange = vi.fn();
+      const user = userEvent.setup();
 
-        // With virtualization, should be <200ms
-        // Without virtualization (current SelectField), would be >5000ms or freeze
-        expect(elapsed).toBeLessThan(200);
-      });
+      const { container } = render(
+        <Combobox
+          options={largeOptions}
+          placeholder="Select type"
+          onValueChange={handleChange}
+        />,
+      );
 
-      it("should keep input responsive at extreme scale", () => {
-        const largeOptions = createTestOptions(10000);
-        const { container } = render(
-          <Combobox
-            options={largeOptions}
-            placeholder="Select type"
-            onValueChange={vi.fn()}
-          />,
-        );
-
-        const input = container.querySelector("input") as HTMLInputElement;
-        fireEvent.focus(input);
-
-        // Filter to a very late item
-        const filterStartTime = performance.now();
-        fireEvent.change(input, { target: { value: "09999" } });
-        const filterEndTime = performance.now();
-
-        // Input should respond instantly
-        expect(input.value).toBe("09999");
-        const inputLatency = filterEndTime - filterStartTime;
-
-        // Input must be instant regardless of 10k items (useDeferredValue keeps this responsive)
-        expect(inputLatency).toBeLessThan(50);
+      const input = container.querySelector("input") as HTMLInputElement;
+      await user.click(input);
+      await user.type(input, "08500");
+      await waitFor(() => {
+        expect(document.querySelectorAll('[role="option"]').length).toBe(1);
       });
+      await user.keyboard("{ArrowDown}{Enter}");
 
-      it("should select a specific late item after filtering at 10,000-item scale", async () => {
-        const largeOptions = createTestOptions(10000);
-        const handleChange = vi.fn();
-        const { container, findByText } = render(
-          <Combobox
-            options={largeOptions}
-            placeholder="Select type"
-            onValueChange={handleChange}
-          />,
-        );
-
-        const input = container.querySelector("input") as HTMLInputElement;
-        fireEvent.focus(input);
-        fireEvent.change(input, { target: { value: "08500" } });
-
-        const option = await findByText("Vertex Type 08500");
-        fireEvent.click(option);
-
-        expect(handleChange).toHaveBeenCalledWith("type_8500");
-      });
+      expect(handleChange).toHaveBeenCalledWith("type_8500");
     });
   });
 });
diff --git a/packages/graph-explorer/src/components/Combobox.tsx b/packages/graph-explorer/src/components/Combobox.tsx
index f0a914e7f..8ad57e8c3 100644
--- a/packages/graph-explorer/src/components/Combobox.tsx
+++ b/packages/graph-explorer/src/components/Combobox.tsx
@@ -1,16 +1,16 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { type ReactVirtualizer, useVirtualizer } from "@tanstack/react-virtual";
-import { ChevronDownIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import {
   useCallback,
   useDeferredValue,
+  useId,
   useImperativeHandle,
-  useLayoutEffect,
   useMemo,
+  useReducer,
   useRef,
-  useState,
 } from "react";
 
 import { cn } from "@/utils";
@@ -20,15 +20,12 @@ export interface ComboboxOption {
   value: string;
 }
 
-export interface ComboboxProps extends Omit<
-  ComponentPropsWithoutRef<"input">,
-  "value" | "onChange"
-> {
+export interface ComboboxProps {
   /** Array of options to render */
   options: ComboboxOption[];
   /** Current selected value */
   value?: string;
-  /** Called when selection changes */
+  /** Called when an option is selected */
   onValueChange?: (value: string) => void;
   /** Placeholder text when no value selected */
   placeholder?: string;
@@ -36,8 +33,12 @@ export interface ComboboxProps extends Omit<
   label?: ReactNode;
   /** Disable interaction */
   disabled?: boolean;
-  /** Additional CSS classes */
+  /** Additional CSS classes for the outer control */
   className?: string;
+  /** Forwarded to the input, for external `<label htmlFor>` association */
+  id?: string;
+  /** Accessible name for the input; omit when using `label` for a visible caption instead */
+  "aria-label"?: string;
 }
 
 type Virtualizer = ReactVirtualizer<HTMLDivElement, Element>;
@@ -46,6 +47,39 @@ function isSameOption(a: ComboboxOption, b: ComboboxOption) {
   return a.value === b.value;
 }
 
+// Base UI's own reason taxonomy for onInputValueChange: these three are the
+// only reasons that represent the user actually editing the text. Every
+// other reason (selection commit syncing the display label, the controlled
+// `value` prop changing, initial mount) fires the same callback but must not
+// be treated as "the user is filtering" or the input would visibly reopen
+// itself right after a selection.
+const TYPED_REASONS = new Set(["input-change", "input-paste", "input-clear"]);
+
+type ComboboxState = {
+  open: boolean;
+  /** null mirrors the selected option's label; a string is an in-progress filter */
+  filterText: string | null;
+};
+
+type ComboboxAction =
+  | { type: "typed"; value: string }
+  | { type: "opened" }
+  | { type: "closed" };
+
+function comboboxReducer(
+  state: ComboboxState,
+  action: ComboboxAction,
+): ComboboxState {
+  switch (action.type) {
+    case "typed":
+      return { open: true, filterText: action.value };
+    case "opened":
+      return { ...state, open: true };
+    case "closed":
+      return { open: false, filterText: null };
+  }
+}
+
 /**
  * Virtualized combobox component for large option lists (10,000+). Wraps
  * Base UI's combobox primitives (accessible listbox/combobox semantics,
@@ -58,6 +92,10 @@ function isSameOption(a: ComboboxOption, b: ComboboxOption) {
  * - WCAG 2.1 Level AA accessibility
  * - Matches Select/Radix design tokens
  *
+ * See docs/adr/ for why this wraps Base UI instead of extending the
+ * Radix-based Select: Radix's Select can't virtualize 10k+ items without
+ * abandoning its item-registration model.
+ *
  * @example
  * ```tsx
  * const [value, setValue] = useState("");
@@ -80,10 +118,14 @@ export function Combobox({
   label,
   disabled = false,
   className,
-  ...inputProps
+  id,
+  "aria-label": ariaLabel,
 }: ComboboxProps) {
-  const [open, setOpen] = useState(false);
-  const [filterText, setFilterText] = useState("");
+  const [{ open, filterText }, dispatch] = useReducer(comboboxReducer, {
+    open: false,
+    filterText: null,
+  });
+  const captionId = useId();
   const virtualizerRef = useRef<Virtualizer | null>(null);
   // Anchors the popup to the whole bordered control (input + trigger
   // button), matching SelectTrigger's width. Base UI's own default anchor
@@ -105,49 +147,61 @@ export function Combobox({
   );
 
   // Defer filtered list rendering to keep input responsive during filtering
-  const deferredFilter = useDeferredValue(filterText);
+  const deferredFilter = useDeferredValue(filterText ?? "");
+
+  // Base UI's useFilter() returns a fresh Filter object every render (it
+  // isn't memoized internally) even though its actual matching behavior
+  // never changes here (no locale/sensitivity options are passed in), so
+  // including it in the deps below would recompute filteredOptions on every
+  // incidental re-render for no behavioral reason.
+  const filter = BaseCombobox.useFilter();
 
   const filteredOptions = useMemo(() => {
-    const lowerFilter = deferredFilter.toLowerCase();
-    if (!lowerFilter) return options;
-    return options.filter(opt => opt.label.toLowerCase().includes(lowerFilter));
+    if (!deferredFilter) return options;
+    return options.filter(opt =>
+      filter.contains(opt, deferredFilter, o => o.label),
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `filter` intentionally excluded, see comment above
   }, [deferredFilter, options]);
 
   const selectedOption = options.find(opt => opt.value === value) ?? null;
   // Mirrors the closed-state label until the user types, without needing a
   // separate "display value" prop on Base UI's fully-controlled Input.
-  const inputValue = filterText || (selectedOption?.label ?? "");
+  const inputValue = filterText ?? selectedOption?.label ?? "";
 
   return (
     <div className={cn("relative w-full", className)}>
       <BaseCombobox.Root
+        // Without this, Combobox.List wraps its children in a CompositeList
+        // that truncates its ref list to only the currently-mounted rows on
+        // every scroll remount, silently bounding keyboard navigation to
+        // whatever's visible instead of the full option count.
+        virtualized
         items={options}
         filteredItems={filteredOptions}
         isItemEqualToValue={isSameOption}
         value={selectedOption}
-        onValueChange={next => onValueChange?.(next ? next.value : "")}
+        onValueChange={next => {
+          if (next) onValueChange?.(next.value);
+        }}
         inputValue={inputValue}
-        onInputValueChange={next => {
-          setFilterText(next);
-          setOpen(true);
+        onInputValueChange={(next, eventDetails) => {
+          if (TYPED_REASONS.has(eventDetails.reason)) {
+            dispatch({ type: "typed", value: next });
+          }
         }}
         open={open}
-        onOpenChange={(nextOpen, eventDetails) => {
-          // Blur alone never closes the list (matches the previously
-          // validated behavior, where only Escape, an outside click, or a
-          // selection did); only "not on focus" governs opening.
-          if (!nextOpen && eventDetails.reason === "focus-out") return;
-          setOpen(nextOpen);
-          // Single reset point for the filter, covering every other close
-          // reason (Escape, outside click, selection) instead of scattering
-          // `setFilterText("")` across individual handlers.
-          if (!nextOpen) setFilterText("");
+        onOpenChange={nextOpen => {
+          dispatch(nextOpen ? { type: "opened" } : { type: "closed" });
         }}
         onItemHighlighted={(_item, { reason, index }) => {
-          // Keyboard navigation scrolls the active item into view; mouse
-          // hover only highlights it, matching the previously validated
-          // behavior (fixed across several rounds of manual testing).
-          if (reason !== "keyboard") return;
+          // "keyboard" is arrow-key navigation; "none" is Base UI
+          // auto-highlighting the already-selected item when the popup
+          // opens (this is what scrolls a far-down selection into view on
+          // open). Mouse hover uses "pointer" and must not scroll, matching
+          // previously validated behavior (fixed across several rounds of
+          // manual testing).
+          if (reason !== "keyboard" && reason !== "none") return;
           virtualizerRef.current?.scrollToIndex(index, { align: "center" });
         }}
         disabled={disabled}
@@ -155,21 +209,26 @@ export function Combobox({
         <div
           ref={triggerRef}
           className={cn(
-            "ring-offset-background border-input-border bg-input-background text-foreground placeholder:text-muted-foreground focus-within:border-primary data-open:border-primary",
+            "ring-offset-background border-input-border bg-input-background text-foreground placeholder:text-muted-foreground focus-within:border-primary",
             "flex w-full items-center justify-between rounded-md border text-sm whitespace-nowrap shadow-xs transition-colors duration-100",
             label ? "h-11 px-3 py-1" : "h-10 px-3 py-2",
-            "focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            "focus:outline-hidden has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50",
             open && "border-primary",
           )}
         >
           <div className="flex min-w-0 flex-1 flex-col items-start justify-center gap-0">
             {label ? (
-              <span className="text-muted-foreground text-xs leading-none">
+              <span
+                id={captionId}
+                className="text-muted-foreground text-xs leading-none"
+              >
                 {label}
               </span>
             ) : null}
             <BaseCombobox.Input
-              {...inputProps}
+              id={id}
+              aria-label={ariaLabel}
+              aria-labelledby={!ariaLabel && label ? captionId : undefined}
               disabled={disabled}
               placeholder={!selectedOption ? placeholder : ""}
               className="placeholder:text-muted-foreground w-full bg-transparent outline-hidden"
@@ -183,7 +242,7 @@ export function Combobox({
                 // click. Only open, never toggle closed: closing on a
                 // second click would fight repositioning the cursor while
                 // typing.
-                if (!open) setOpen(true);
+                if (!open) dispatch({ type: "opened" });
               }}
               onKeyDown={e => {
                 // VoiceOver's built-in combobox hint tells users to press
@@ -194,26 +253,26 @@ export function Combobox({
                 // keystroke so it can't leak into the filter text.
                 if (e.ctrlKey && e.altKey && e.code === "Space") {
                   e.preventDefault();
-                  setOpen(true);
+                  dispatch({ type: "opened" });
                 }
               }}
             />
           </div>
           <BaseCombobox.Trigger
             disabled={disabled}
-            // Purely a decorative, mouse/touch-only affordance, like the
-            // arrow on a native <select>: ArrowDown on the input already
-            // opens the list. Excluding it from the accessibility tree (not
-            // just the Tab order) keeps screen readers from seeing the
-            // trigger as a group of two controls to interact with —
-            // VoiceOver in particular reads Control-Option-Space on a
-            // grouped control as "stop interacting with this group" and
-            // pops focus off the input instead of opening the list. Base
-            // UI's own Trigger (rather than a hand-rolled button) is what
-            // makes a second click reliably close the list instead of
-            // racing the library's own open-state handling.
-            tabIndex={-1}
-            aria-hidden="true"
+            // Kept in the accessibility tree and tab order on purpose: when
+            // the input already has a value, VoiceOver's Read-All treats a
+            // filled text input as content to read and skips announcing its
+            // combobox role — this button is what re-announces "combo box"
+            // in that case (confirmed against shadcn's Base UI reference
+            // implementation, which does the same). An earlier revision
+            // hid this from screen readers to avoid VoiceOver reading
+            // Control-Option-Space on a grouped control as "stop
+            // interacting with this group" — re-verify that specific
+            // interaction if it resurfaces. Base UI's own Trigger (rather
+            // than a hand-rolled button) is what makes a second click
+            // reliably close the list instead of racing the library's own
+            // open-state handling.
             className="hover:bg-input-background ml-2 shrink-0 p-1 disabled:cursor-not-allowed"
           >
             <BaseCombobox.Icon>
@@ -242,7 +301,8 @@ export function Combobox({
                 // carry made the list feel twice as slow to appear as every
                 // other dropdown in the app.
                 "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 origin-(--transform-origin) transition-none",
-                "max-h-96 w-(--anchor-width) overflow-hidden rounded-md border shadow-md",
+                "data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95",
+                "max-w-sm min-w-(--anchor-width) overflow-hidden rounded-md border p-1 shadow-md",
               )}
             >
               <BaseCombobox.Empty
@@ -291,20 +351,12 @@ function VirtualizedOptions({
   const virtualizer = useVirtualizer({
     count: filteredOptions.length,
     getScrollElement: () => scrollElementRef.current,
-    estimateSize: () => 40, // ~40px per item
-    overscan: 5, // Render 5 items outside visible area for smoother scroll
+    estimateSize: () => 40,
+    overscan: 5,
   });
 
   useImperativeHandle(virtualizerRef, () => virtualizer);
 
-  // Combobox.List (the real scrollable viewport) mounts in the same commit
-  // as this component, so scrollElementRef is already populated by the time
-  // this runs — force a measurement against its real dimensions instead of
-  // waiting for a resize-observer tick.
-  useLayoutEffect(() => {
-    virtualizer.measure();
-  }, [virtualizer]);
-
   const virtualItems = virtualizer.getVirtualItems();
   const totalSize = virtualizer.getTotalSize();
 
@@ -335,12 +387,14 @@ function VirtualizedOptions({
             }}
             className={cn(
               "text-foreground data-highlighted:bg-primary-subtle",
-              "flex w-full cursor-pointer items-center justify-between px-3 py-2 text-left text-sm outline-hidden transition-colors duration-100",
+              "flex w-full cursor-default items-center justify-between rounded-sm px-3 py-2 text-left text-base outline-hidden transition-colors duration-100",
             )}
           >
-            <span className="block truncate">{option.label}</span>
-            <BaseCombobox.ItemIndicator className="ml-2 shrink-0 font-semibold">
-              ✓
+            <span className="block truncate" title={option.label}>
+              {option.label}
+            </span>
+            <BaseCombobox.ItemIndicator className="ml-2 shrink-0">
+              <CheckIcon className="size-4" />
             </BaseCombobox.ItemIndicator>
           </BaseCombobox.Item>
         );
diff --git a/packages/graph-explorer/src/routes/DataExplorer/DataExplorer.tsx b/packages/graph-explorer/src/routes/DataExplorer/DataExplorer.tsx
index f4b8f2a1f..c3c5e60df 100644
--- a/packages/graph-explorer/src/routes/DataExplorer/DataExplorer.tsx
+++ b/packages/graph-explorer/src/routes/DataExplorer/DataExplorer.tsx
@@ -132,8 +132,7 @@ function DataExplorerContent({ vertexType }: { vertexType: VertexType }) {
     label: config.displayLabel,
   }));
 
-  const onVertexTypeChange = (value: string | string[]) => {
-    const newType = Array.isArray(value) ? value[0] : value;
+  const onVertexTypeChange = (newType: string) => {
     navigate(`/data-explorer/${encodeURIComponent(newType)}`, {
       replace: true,
     });
@@ -148,7 +147,6 @@ function DataExplorerContent({ vertexType }: { vertexType: VertexType }) {
           onValueChange={onVertexTypeChange}
           options={vertexTypeOptions}
           label={t("node-type")}
-          aria-label={t("node-type")}
         />
         <div className="flex items-center gap-2">
           <DisplayNameAndDescriptionOptions vertexType={vertexType} />

From cf7372656b409227dd0ddd14a66c9e0de3260812 Mon Sep 17 00:00:00 2001
From: Mario Juarros <juarros74@hotmail.com>
Date: Mon, 17 Aug 2026 13:01:42 -0600
Subject: [PATCH 5/7] Stabilize useTranslations and memoize vertexOptions

useTranslations() returned a fresh function on every render, which fed
into useAttributeOptions's own useMemo dependency array and defeated it
every render regardless of whether the underlying data changed. vertexOptions
had the same problem one level up: a fresh array of fresh objects on every
render, defeating Combobox's own filteredOptions memo on every keystroke.
---
 .../src/hooks/useTranslations.ts              | 10 ++++++--
 .../modules/SearchSidebar/useKeywordSearch.ts | 25 +++++++++++--------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/graph-explorer/src/hooks/useTranslations.ts b/packages/graph-explorer/src/hooks/useTranslations.ts
index 69f1c8f23..22ec2b9e7 100644
--- a/packages/graph-explorer/src/hooks/useTranslations.ts
+++ b/packages/graph-explorer/src/hooks/useTranslations.ts
@@ -1,6 +1,7 @@
 import type { QueryEngine } from "@shared/types";
 
 import { flatten } from "flat";
+import { useCallback } from "react";
 
 import { useQueryEngine } from "@/core/connector";
 
@@ -28,8 +29,13 @@ export function getTranslation(
 export default function useTranslations() {
   const queryEngine = useQueryEngine();
 
-  return (key: TranslationPaths, ns?: QueryEngine) =>
-    getTranslation(key, ns || queryEngine);
+  // Stable across renders so callers can safely depend on `t` in their own
+  // useMemo/useCallback deps without it defeating their memoization.
+  return useCallback(
+    (key: TranslationPaths, ns?: QueryEngine) =>
+      getTranslation(key, ns || queryEngine),
+    [queryEngine],
+  );
 }
 
 /*
diff --git a/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts b/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts
index b6a4df266..4c6b1bce1 100644
--- a/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts
+++ b/packages/graph-explorer/src/modules/SearchSidebar/useKeywordSearch.ts
@@ -80,17 +80,20 @@ export default function useKeywordSearch() {
   ];
 
   const vtConfigs = useDisplayVertexTypeConfigs();
-  const vertexOptions = [
-    { label: "All", value: SEARCH_TOKENS.ALL_VERTEX_TYPES },
-    ...vtConfigs
-      .values()
-      // Filtering out empty types because the queries need to be updated to support them
-      .filter(vtConfig => vtConfig.type !== "")
-      .map(vtConfig => ({
-        label: vtConfig.displayLabel,
-        value: vtConfig.type,
-      })),
-  ];
+  const vertexOptions = useMemo(
+    () => [
+      { label: "All", value: SEARCH_TOKENS.ALL_VERTEX_TYPES },
+      ...vtConfigs
+        .values()
+        // Filtering out empty types because the queries need to be updated to support them
+        .filter(vtConfig => vtConfig.type !== "")
+        .map(vtConfig => ({
+          label: vtConfig.displayLabel,
+          value: vtConfig.type,
+        })),
+    ],
+    [vtConfigs],
+  );
 
   const attributesOptions = useAttributeOptions(selectedVertexType);
   const defaultSearchAttribute =

From c55072019cd72e5847599cf03c070910d4b5ee07 Mon Sep 17 00:00:00 2001
From: Mario Juarros <juarros74@hotmail.com>
Date: Mon, 17 Aug 2026 14:03:53 -0600
Subject: [PATCH 6/7] Deduplicate Combobox's dependencies and override a
 vulnerable transitive nanoid

@base-ui/react and @tanstack/react-virtual were declared in both the
workspace root and packages/graph-explorer, though only graph-explorer
imports them. Also adds an override for nanoid (GHSA-2v37-7h3g-55p8),
pulled in transitively via vite > postcss and confined to dev, following
the existing override pattern for esbuild/dompurify/undici.
---
 package.json        |  2 --
 pnpm-lock.yaml      | 25 ++++++++++---------------
 pnpm-workspace.yaml |  1 +
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 5908fd7bb..5e6da5e84 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,6 @@
     "dev": "pnpm --stream -r run dev"
   },
   "dependencies": {
-    "@base-ui/react": "^1.7.0",
-    "@tanstack/react-virtual": "^3.14.9",
     "dompurify": "^3.4.13"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index deb8aef3b..397916737 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -213,6 +213,7 @@ overrides:
   flatted@<3.4.2: '>=3.4.2'
   form-data@>=4.0.0 <4.0.6: '>=4.0.6'
   minimatch@<10.2.3: '>=10.2.3'
+  nanoid@<3.3.18: '>=3.3.18'
   path-to-regexp@>=8.0.0 <8.4.0: '>=8.4.0'
   picomatch@<2.3.2: '>=2.3.2'
   picomatch@>=4.0.0 <4.0.4: '>=4.0.4'
@@ -224,12 +225,6 @@ importers:
 
   .:
     dependencies:
-      '@base-ui/react':
-        specifier: ^1.7.0
-        version: 1.7.0(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      '@tanstack/react-virtual':
-        specifier: ^3.14.9
-        version: 3.14.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       dompurify:
         specifier: ^3.4.13
         version: 3.4.13
@@ -4036,8 +4031,8 @@ packages:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
-  get-tsconfig@4.14.2:
-    resolution: {integrity: sha512-XpwZALwwl/BaKTAyC6+c5T8y6kCg2jk+XGqOVrKIQmW49pNypYLMRjCUXqa28tQgJlhS2RlzP7sc+Rx7W6qsfw==}
+  get-tsconfig@4.14.1:
+    resolution: {integrity: sha512-Dz/6HxkrxgNehhxLVeyv8sad9UzF2xBVeaKBQNDfJ5XiSXmp2gTR0eO0RWiT2NCKS5aGP9jjkOMggTN90qU50A==}
 
   glob-parent@6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
@@ -4544,9 +4539,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  nanoid@3.3.18:
-    resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+  nanoid@6.0.1:
+    resolution: {integrity: sha512-3wVS3i51pE2pi1k5FFL/95BGfVS0kSsvDVuGXHOtxox/TywUmtgq+3qiTOTbs9J7KfHaXPiN171k/A6dBnaXFw==}
+    engines: {node: ^22 || ^24 || >=26}
     hasBin: true
 
   natural-compare@1.4.0:
@@ -9046,7 +9041,7 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
-  get-tsconfig@4.14.2:
+  get-tsconfig@4.14.1:
     dependencies:
       resolve-pkg-maps: 1.0.0
     optional: true
@@ -9465,7 +9460,7 @@ snapshots:
 
   ms@2.1.3: {}
 
-  nanoid@3.3.18: {}
+  nanoid@6.0.1: {}
 
   natural-compare@1.4.0: {}
 
@@ -9647,7 +9642,7 @@ snapshots:
 
   postcss@8.5.25:
     dependencies:
-      nanoid: 3.3.18
+      nanoid: 6.0.1
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -10213,7 +10208,7 @@ snapshots:
   tsx@4.21.0:
     dependencies:
       esbuild: 0.28.1
-      get-tsconfig: 4.14.2
+      get-tsconfig: 4.14.1
     optionalDependencies:
       fsevents: 2.3.3
     optional: true
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index a34311b94..b938b6179 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -11,6 +11,7 @@ overrides:
   flatted@<3.4.2: ">=3.4.2"
   form-data@>=4.0.0 <4.0.6: ">=4.0.6"
   minimatch@<10.2.3: ">=10.2.3"
+  nanoid@<3.3.18: ">=3.3.18"
   path-to-regexp@>=8.0.0 <8.4.0: ">=8.4.0"
   picomatch@<2.3.2: ">=2.3.2"
   picomatch@>=4.0.0 <4.0.4: ">=4.0.4"

From 8eae32ac0ad298729c7dedbec7aace7353192d0b Mon Sep 17 00:00:00 2001
From: Mario Juarros <juarros74@hotmail.com>
Date: Mon, 17 Aug 2026 14:03:59 -0600
Subject: [PATCH 7/7] Document Combobox's Base UI adoption, VoiceOver behavior,
 and type-to-filter support

Adds an ADR for introducing @base-ui/react and @tanstack/react-virtual
alongside the existing Radix/shadcn stack, exceptions to the React
Compiler guidance for the memoization and useVirtualizer cases this PR
needed, the Base UI vs Radix data-attribute divergence, and the jsdom
offsetHeight gotcha the test suite works around. Also updates user-facing
docs to mention that the node-type/attribute pickers now support typing
to filter.
---
 ...base-ui-combobox-for-virtualized-search.md | 35 +++++++++++++++++++
 docs/agents/design.md                         |  1 +
 docs/agents/react.md                          |  2 ++
 docs/agents/testing.md                        |  1 +
 docs/features/data-table.md                   |  2 +-
 docs/features/graph-view.md                   |  1 +
 docs/getting-started/README.md                |  4 +--
 7 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 docs/adr/20260814-base-ui-combobox-for-virtualized-search.md

diff --git a/docs/adr/20260814-base-ui-combobox-for-virtualized-search.md b/docs/adr/20260814-base-ui-combobox-for-virtualized-search.md
new file mode 100644
index 000000000..239e1d2ab
--- /dev/null
+++ b/docs/adr/20260814-base-ui-combobox-for-virtualized-search.md
@@ -0,0 +1,35 @@
+# ADR — Base UI + TanStack Virtual for the virtualized Combobox
+
+- **Status:** Accepted
+- **Date:** 2026-08-14
+- **Related:** Issues #2086, #2087, #2089, #2090. Affects `components/Combobox.tsx` only.
+
+## Context
+
+Several pickers (node-type and attribute in the Search Sidebar, node-type in Data Explorer) render schema-derived option lists that scale with the number of vertex/edge types — into the thousands on large schemas. The existing `Select`/`SelectField` components wrap Radix's `Select` primitive, which renders every item into its own internal item-registration registry regardless of what's actually visible in the DOM. That registry, not just the visible DOM node count, is what scales with option count, so it can't be virtualized without abandoning Radix's `Select` entirely: at schema sizes in the thousands this locked up the UI.
+
+Two alternatives were tried before landing on the current approach:
+
+- **A fully hand-rolled combobox** was built first (see git history: the commit preceding this one shipped a hand-rolled implementation). It re-implemented accessible combobox semantics from scratch — ARIA roles, keyboard navigation, focus management, positioning — which is exactly the kind of well-tested, easy-to-get-subtly-wrong surface a primitives library exists to own. It was replaced rather than kept.
+- **cmdk**, a virtualization-friendly command-palette library, was considered but doesn't provide the same breadth of accessible combobox wiring (positioning, focus management, ARIA) that Base UI ships, which would have meant hand-building some of the same surface the hand-rolled attempt already showed is easy to get wrong.
+
+## Decision
+
+`components/Combobox.tsx` wraps `@base-ui/react`'s `Combobox` primitives (accessible listbox/combobox semantics, ARIA wiring, positioning) with `@tanstack/react-virtual` for windowed rendering. This is deliberately scoped to **one file**: `Select`/`SelectField` and their Radix-based implementation are untouched, and remain the right choice for bounded, non-schema-sized option lists.
+
+Both dependencies are added only to `packages/graph-explorer/package.json`, not the workspace root, since only this file imports them.
+
+## Consequences
+
+- **A second UI primitive stack now exists, scoped to one file.** An agent choosing between `Combobox` and `Select`/`SelectField` for a new picker should pick based on scale: `Combobox` for schema-sized/unbounded lists that need type-to-filter and virtualization, `Select`/`SelectField` for small bounded enums. Do not introduce a third primitive stack for the same class of problem — extend `Combobox` instead.
+- **Base UI's attribute convention differs from Radix's.** Base UI emits bare boolean data attributes (`data-open`, `data-closed`, `data-starting-style`, `data-ending-style`), not Radix's `data-state="open"`/`"closed"`. The project's `data-open:`/`data-closed:` Tailwind shorthand is scoped to the Radix convention and will not match Base UI elements — see `docs/agents/design.md`.
+- **`useVirtualizer` needs a React Compiler suppression.** The call in `Combobox.tsx` carries a `// eslint-disable-next-line react-compiler/incompatible-library` comment, since the compiler can't verify the hook's internal mutation patterns are safe to auto-memoize. See `docs/agents/react.md`.
+- **The trigger/input interaction pattern is VoiceOver-validated, not just ARIA-linted.** The decorative arrow button is `aria-hidden` and click-only (not keyboard-focusable); the input itself gets an explicit `onClick` handler to open the list, because a text input has no native "click" default action the way a `<button>` does, and VoiceOver's Control-Option-Space gesture needs one to trigger reliably. A grouped, AX-visible trigger button reads to VoiceOver as "stop interacting with this group" rather than "open the list" — this was found and fixed via live VoiceOver testing on macOS across several rounds, not derived from an accessibility guideline. Changing this interaction pattern needs to be re-validated with a screen reader, not just re-derived from ARIA best practices.
+- **Only visible options mount.** `VirtualizedOptions` renders ~20 DOM nodes regardless of total option count; the virtualizer must measure `Combobox.List` (the bounded, scrollable viewport), not the inner spacer div that's deliberately as tall as the full list — measuring the wrong element defeats virtualization silently (it "works" but renders nearly everything).
+
+## Considered Options
+
+- **Base UI + TanStack Virtual (chosen).** Accessible combobox semantics come from a maintained library; virtualization is a separate, composable concern. Cost: a second primitive stack, plus the attribute-convention and compiler-suppression divergences above.
+- **Hand-rolled combobox.** Tried first, replaced. Re-implementing ARIA wiring, keyboard navigation, and positioning from scratch duplicates what a primitives library already gets right, for no benefit over adopting one.
+- **cmdk.** Virtualization-friendly, but would still require hand-building positioning and some ARIA wiring that Base UI provides directly.
+- **Extend Radix `Select`.** Not viable: its item-registration model scales with option count independently of the DOM, which is the exact problem being solved.
diff --git a/docs/agents/design.md b/docs/agents/design.md
index 264ae400d..f1d706267 100644
--- a/docs/agents/design.md
+++ b/docs/agents/design.md
@@ -74,6 +74,7 @@ Dark mode is a planned future feature. The semantic token structure is designed
 - Use **Tailwind v4 CSS syntax** — `@theme`, `@utility`, `@custom-variant` blocks in CSS.
 - Prefer **data attributes** for conditional styles. Tailwind v4 provides two forms:
   - `data-open:` / `data-closed:` — shorthand variants (defined via `@custom-variant` in `index.css`) that match `[data-state="open"]` / `[data-state="closed"]`, the Radix convention. Note: this **redefines** Tailwind's native behavior, where a bare `data-open:` would match the presence of a `data-open` attribute. Also: `aria-invalid:` for form validation.
+    - **Base UI components don't emit `data-state`.** They set bare boolean attributes instead (`data-open`, `data-closed`, `data-starting-style`, `data-ending-style`), so the project's `data-open:`/`data-closed:` shorthand above will silently never match a Base UI element. For Base UI components (currently only `components/Combobox.tsx`), use Tailwind's native bare-attribute variants directly — `data-open:`, `data-ending-style:`, etc. — not the Radix-scoped shorthand.
   - `data-[attr=value]:` — arbitrary-value form for one-off attributes.
 - Prefer **Tailwind responsive directives and container queries** over `ResizeObserver` for responsive layout changes.
 - Reference: https://tailwindcss.com/docs
diff --git a/docs/agents/react.md b/docs/agents/react.md
index 62984c288..d9441a5f8 100644
--- a/docs/agents/react.md
+++ b/docs/agents/react.md
@@ -15,6 +15,8 @@
 
 - Server state goes in TanStack Query
 - **Exception: vertex icons.** They resolve through the `core/icons/` registry, read via `useSyncExternalStore`, because a per-hook subscription scaled with vertex-type count and locked up the schema view at 10k types. Don't move icon resolution back into TanStack Query — see `docs/adr/20260813-icon-registry-not-react-query.md`
+- **Exception: `useSearchableAttributes`'s internal `useMemo`** (`core/StateProvider/displayTypeConfigs.ts`). The compiler doesn't run under Vitest, so this memo is load-bearing for the test suite even though it would be redundant in the compiled production bundle. Don't remove it without also proving the referential-stability test in `useKeywordSearch.test.ts` still passes. Elsewhere, prefer stabilizing the _input_ to a memo (e.g. `useTranslations()`'s returned function is wrapped in `useCallback`) over adding more manual memos downstream of an unstable dependency
+- **Exception: `useVirtualizer` (`@tanstack/react-virtual`)**, used in `components/Combobox.tsx`. It needs a `// eslint-disable-next-line react-compiler/incompatible-library` comment on the call — the compiler can't verify the hook's internal mutation patterns are safe to auto-memoize
 
 ## Feature Modules
 
diff --git a/docs/agents/testing.md b/docs/agents/testing.md
index bd9d8c209..cecb0411b 100644
--- a/docs/agents/testing.md
+++ b/docs/agents/testing.md
@@ -67,6 +67,7 @@ Commands are in AGENTS.md.
 
 - **`vi.doMock` + dynamic `import()`**: call `vi.resetModules()` in the test's own `beforeEach` (not global — it's expensive). See any test that swaps a module impl between cases.
 - **Production behavior**: tests run `DEV=true`/`PROD=false`; override per-test with `vi.stubEnv("PROD", true)`.
+- **jsdom layout**: jsdom never lays out elements, so `offsetHeight`/`offsetWidth` are always `0`. A component that measures its own size (e.g. a virtualizer deciding which rows are visible) will render as empty, and the failure looks like a component bug rather than an environment limitation. See `Combobox.test.tsx`'s `beforeEach` for the canonical fix: mock `offsetHeight`/`offsetWidth` to read the element's own inline style, falling back to a fixed size, so real measurements are distinguishable from unmeasured ones.
 - **Errors**: assert the full error, not just that one was thrown. `expect(() => fn()).toThrow(new FooError(a, b))` — or `await expect(fn()).rejects.toThrow(new FooError(a, b))` for a rejected promise — deep-compares every property, so a wrong field fails the test. Prefer this over `toThrow(FooError)` (type only) or `toThrow("message")` (message only), which pass even when the code built the error with the wrong data. No need to catch the error and assert fields separately — the instance form already covers them.
 
 ## Backward compatibility for persisted data
diff --git a/docs/features/data-table.md b/docs/features/data-table.md
index b8fc926c4..7852cc172 100644
--- a/docs/features/data-table.md
+++ b/docs/features/data-table.md
@@ -4,7 +4,7 @@
 
 You can use the Data Table view to view the data for the selected node type. You can open the Data Table view by clicking "Data Table" in the navigation bar or by clicking the node type row in the [connection details](./connections.md#connection-details) pane.
 
-- Select a node type from the dropdown to view its data
+- Select a node type from the picker to view its data, or start typing to filter the list
 - View tabular data for the selected node type
 - Set the node type display name and description attributes
 - Export the current table data to a CSV or JSON file
diff --git a/docs/features/graph-view.md b/docs/features/graph-view.md
index d33ab26f2..7e2497378 100644
--- a/docs/features/graph-view.md
+++ b/docs/features/graph-view.md
@@ -37,6 +37,7 @@ The Search UI provides two powerful ways to search and interact with your graph
 - Enables faceted filtering of nodes based on:
   - Node labels (or rdf:type for RDF databases)
   - Node attribute values
+- The node label and attribute pickers support type-to-filter, so you can find a type or property by typing part of its name instead of scrolling
 - Supports partial text matching
 - Search results can be added to the graph individually or all at once
 - Supports cancellation of long-running queries
diff --git a/docs/getting-started/README.md b/docs/getting-started/README.md
index 9609ab7b0..bbcc91081 100644
--- a/docs/getting-started/README.md
+++ b/docs/getting-started/README.md
@@ -39,7 +39,7 @@ On the right side of the graph view, you will see a vertical strip of sidebar ic
 ## Search for a Node
 
 1. Click the **Search** icon (magnifying glass) in the right sidebar to open the Search panel.
-2. In the **Node Label** dropdown, select **airport**.
+2. In the **Node Label** dropdown, select **airport** (you can type to filter the list).
 3. In the **Property** dropdown, select **code**.
 4. In the search text field, type `AUS`.
 5. Click the result for Austin to expand it, then click the **⊕** button to add it to the graph canvas.
@@ -99,7 +99,7 @@ All airport nodes on the canvas update with the new labels and color. You can al
 The Data Table page lets you browse all nodes in the database without adding them to the graph first.
 
 1. Click **Data Table** in the navigation bar.
-2. The **Node Label** dropdown at the top left is pre-selected to **airport**. Use it to switch to other types like **country** or **continent**.
+2. The **Node Label** dropdown at the top left is pre-selected to **airport**. Use it to switch to other types like **country** or **continent** (you can type to filter the list).
 3. Browse the paginated table of all airports in the dataset.
 4. To send a specific airport to the graph view, click the **Send to Explorer** button on its row.