From 770c559f0668aa00dd911fe533db0dc6d6b6ce0d Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Sat, 23 May 2026 14:37:21 -0400
Subject: [PATCH 1/2] ENG-1731: add keyboard chip filtering input

Replace the advanced search input with a chip-based type filter input that supports ghost tab-completion and keyboard chip navigation while staying in sync with the dropdown filter state.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../AdvancedSearchDialog.tsx                  |  91 ++++--
 .../NodeTypeChipsSearchInput.tsx              | 309 ++++++++++++++++++
 2 files changed, 366 insertions(+), 34 deletions(-)
 create mode 100644 apps/roam/src/components/AdvancedNodeSearchDialog/NodeTypeChipsSearchInput.tsx

diff --git a/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx b/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
index a5d6bbdd6..9bce5635b 100644
--- a/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
+++ b/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
@@ -1,14 +1,8 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   Button,
   Dialog,
-  InputGroup,
+  Icon,
   NonIdealState,
   Spinner,
   SpinnerSize,
@@ -34,6 +28,7 @@ import { getNodeTagStyles } from "~/utils/getDiscourseNodeColors";
 import {
   DEBOUNCE_MS,
   DEFAULT_SORT_CONFIG,
+  MAX_RESULTS,
   type SearchResult,
   type SortConfig,
   buildSearchIndex,
@@ -46,6 +41,7 @@ import {
 import { DiscourseNodeTypeFilter } from "~/components/AdvancedNodeSearchDialog/DiscourseNodeTypeFilter";
 import { RenderRoamBlock, RenderRoamPage } from "~/utils/roamReactComponents";
 import { AdvancedSearchFooter } from "./AdvancedSearchFooter";
+import { NodeTypeChipsSearchInput } from "./NodeTypeChipsSearchInput";
 
 type Props = Record<string, unknown>;
 
@@ -160,6 +156,7 @@ const AdvancedNodeSearchDialog = ({
   const [sort, setSort] = useState<SortConfig>(DEFAULT_SORT_CONFIG);
   const [discourseNodes, setDiscourseNodes] = useState<DiscourseNode[]>([]);
   const [selectedNodeTypeIds, setSelectedNodeTypeIds] = useState<string[]>([]);
+  const [isTypeFilterPopoverOpen, setIsTypeFilterPopoverOpen] = useState(false);
   const miniSearchRef = useRef<MiniSearch<
     SearchResult & { id: string }
   > | null>(null);
@@ -205,25 +202,31 @@ const AdvancedNodeSearchDialog = ({
   }, [isOpen]);
 
   useEffect(() => {
-    if (
-      !isOpen ||
-      isIndexLoading ||
-      indexError ||
-      !debouncedSearchTerm ||
-      !miniSearchRef.current
-    ) {
+    const hasTypeFilters = selectedNodeTypeIds.length > 0;
+
+    if (!isOpen || isIndexLoading || indexError || !miniSearchRef.current) {
       setResults([]);
       return;
     }
 
-    const scoredHits = searchIndexedNodes({
-      miniSearch: miniSearchRef.current,
-      allResults: allResultsRef.current,
-      searchTerm: debouncedSearchTerm,
-      typeFilter: selectedNodeTypeIds.length ? selectedNodeTypeIds : undefined,
-    });
+    if (!debouncedSearchTerm && !hasTypeFilters) {
+      setResults([]);
+      return;
+    }
 
-    setResults(sortSearchResults({ hits: scoredHits, sort }));
+    const scoredHits = debouncedSearchTerm
+      ? searchIndexedNodes({
+          miniSearch: miniSearchRef.current,
+          allResults: allResultsRef.current,
+          searchTerm: debouncedSearchTerm,
+          typeFilter: hasTypeFilters ? selectedNodeTypeIds : undefined,
+        })
+      : allResultsRef.current
+          .filter((result) => selectedNodeTypeIds.includes(result.type))
+          .map((result) => ({ result, score: 1 }));
+
+    const sortedResults = sortSearchResults({ hits: scoredHits, sort });
+    setResults(sortedResults.slice(0, MAX_RESULTS));
   }, [
     debouncedSearchTerm,
     indexError,
@@ -314,7 +317,7 @@ const AdvancedNodeSearchDialog = ({
     ? "error"
     : isIndexLoading
       ? "indexing"
-      : !debouncedSearchTerm
+      : !debouncedSearchTerm && selectedNodeTypeIds.length === 0
         ? "initial"
         : !results.length
           ? "empty"
@@ -351,6 +354,7 @@ const AdvancedNodeSearchDialog = ({
 
   const onKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.defaultPrevented) return;
       if (event.key === "ArrowDown" && results.length) {
         event.preventDefault();
         setActiveIndex((index) => Math.min(index + 1, results.length - 1));
@@ -377,6 +381,7 @@ const AdvancedNodeSearchDialog = ({
         event.preventDefault();
         void onInsert();
       } else if (event.key === "Escape") {
+        if (isTypeFilterPopoverOpen) return;
         event.preventDefault();
         onClose();
       }
@@ -384,6 +389,7 @@ const AdvancedNodeSearchDialog = ({
     [
       activeResult,
       contentState,
+      isTypeFilterPopoverOpen,
       insertTarget,
       onClose,
       onInsert,
@@ -417,18 +423,35 @@ const AdvancedNodeSearchDialog = ({
         className="flex min-h-0 flex-1 flex-col overflow-hidden"
       >
         <div className="flex flex-none items-center gap-2 border-b border-gray-200 px-3 py-2">
-          <InputGroup
-            fill
-            inputRef={inputRef}
-            leftIcon="search"
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              setSearchTerm(event.target.value)
-            }
-            placeholder="Search discourse nodes..."
-            value={searchTerm}
-          />
+          <div className="flex min-w-0 flex-1 items-center rounded border border-gray-300 bg-white px-2 py-1">
+            <Icon icon="search" size={16} className="mr-2 text-gray-500" />
+            <NodeTypeChipsSearchInput
+              inputRef={inputRef}
+              nodeTypes={discourseNodes}
+              onArrowDown={() =>
+                setActiveIndex((index) =>
+                  Math.min(index + 1, results.length - 1),
+                )
+              }
+              onArrowUp={() =>
+                setActiveIndex((index) => Math.max(index - 1, 0))
+              }
+              onCmdEnter={() => void onInsert()}
+              onEnter={() => void onOpen()}
+              onEscape={() => {
+                if (isTypeFilterPopoverOpen) return;
+                onClose();
+              }}
+              onSearchTermChange={setSearchTerm}
+              onSelectedTypeIdsChange={setSelectedNodeTypeIds}
+              onShiftEnter={() => void onOpenInSidebar()}
+              searchTerm={searchTerm}
+              selectedTypeIds={selectedNodeTypeIds}
+            />
+          </div>
           <DiscourseNodeTypeFilter
             nodeTypes={discourseNodes}
+            onPopoverOpenChange={setIsTypeFilterPopoverOpen}
             onSelectedTypeIdsChange={setSelectedNodeTypeIds}
             selectedTypeIds={selectedNodeTypeIds}
           />
@@ -476,7 +499,7 @@ const AdvancedNodeSearchDialog = ({
                 <Spinner size={SpinnerSize.SMALL} />
               )}
               {contentState === "empty" && (
-                <span>No matches. Try another keyword.</span>
+                <span>No matches. Try another keyword or filter.</span>
               )}
               {contentState === "error" && (
                 <span>
diff --git a/apps/roam/src/components/AdvancedNodeSearchDialog/NodeTypeChipsSearchInput.tsx b/apps/roam/src/components/AdvancedNodeSearchDialog/NodeTypeChipsSearchInput.tsx
new file mode 100644
index 000000000..a4d16800c
--- /dev/null
+++ b/apps/roam/src/components/AdvancedNodeSearchDialog/NodeTypeChipsSearchInput.tsx
@@ -0,0 +1,309 @@
+import { Button, Classes, Icon } from "@blueprintjs/core";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { getNodeTagStyles } from "~/utils/getDiscourseNodeColors";
+import { type DiscourseNode } from "~/utils/getDiscourseNodes";
+
+type NodeTypeChipsSearchInputProps = {
+  nodeTypes: DiscourseNode[];
+  searchTerm: string;
+  selectedTypeIds: string[];
+  inputRef: React.RefObject<HTMLInputElement>;
+  onSearchTermChange: (value: string) => void;
+  onSelectedTypeIdsChange: (ids: string[]) => void;
+  onArrowDown: () => void;
+  onArrowUp: () => void;
+  onEnter: () => void;
+  onShiftEnter: () => void;
+  onCmdEnter: () => void;
+  onEscape: () => void;
+};
+
+const isPlainCharacterKey = (event: React.KeyboardEvent): boolean =>
+  event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey;
+
+const getUniquePrefixMatch = ({
+  nodeTypes,
+  query,
+  selectedTypeIds,
+}: {
+  nodeTypes: DiscourseNode[];
+  query: string;
+  selectedTypeIds: string[];
+}): DiscourseNode | null => {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return null;
+
+  const selectedTypeIdSet = new Set(selectedTypeIds);
+  const matches = nodeTypes.filter(
+    (node) =>
+      !selectedTypeIdSet.has(node.type) &&
+      node.text.toLowerCase().startsWith(normalizedQuery),
+  );
+
+  return matches.length === 1 ? matches[0] : null;
+};
+
+export const NodeTypeChipsSearchInput = ({
+  nodeTypes,
+  searchTerm,
+  selectedTypeIds,
+  inputRef,
+  onSearchTermChange,
+  onSelectedTypeIdsChange,
+  onArrowDown,
+  onArrowUp,
+  onEnter,
+  onShiftEnter,
+  onCmdEnter,
+  onEscape,
+}: NodeTypeChipsSearchInputProps): React.ReactElement => {
+  const [focusedChipIndex, setFocusedChipIndex] = useState(-1);
+  const chipRefs = useRef<(HTMLSpanElement | null)[]>([]);
+
+  const nodeTypeById = useMemo(
+    () =>
+      Object.fromEntries(
+        nodeTypes.map((nodeType) => [nodeType.type, nodeType]),
+      ),
+    [nodeTypes],
+  );
+
+  const selectedNodeTypes = useMemo(
+    () =>
+      selectedTypeIds
+        .map((typeId) => nodeTypeById[typeId])
+        .filter((nodeType): nodeType is DiscourseNode => !!nodeType),
+    [nodeTypeById, selectedTypeIds],
+  );
+
+  const uniquePrefixMatch = useMemo(
+    () =>
+      getUniquePrefixMatch({
+        nodeTypes,
+        query: searchTerm,
+        selectedTypeIds,
+      }),
+    [nodeTypes, searchTerm, selectedTypeIds],
+  );
+
+  const completionSuffix = useMemo(() => {
+    if (!uniquePrefixMatch) return "";
+    const normalizedQuery = searchTerm.trim();
+    const nodeText = uniquePrefixMatch.text;
+    if (nodeText.toLowerCase() === normalizedQuery.toLowerCase()) return "";
+    return nodeText.slice(normalizedQuery.length);
+  }, [searchTerm, uniquePrefixMatch]);
+
+  useEffect(() => {
+    if (focusedChipIndex < 0) return;
+    chipRefs.current[focusedChipIndex]?.focus();
+  }, [focusedChipIndex]);
+
+  const focusInput = (): void => {
+    setFocusedChipIndex(-1);
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+  };
+
+  const commitNodeType = (nodeType: DiscourseNode): void => {
+    if (selectedTypeIds.includes(nodeType.type)) return;
+    onSelectedTypeIdsChange([...selectedTypeIds, nodeType.type]);
+    onSearchTermChange("");
+  };
+
+  const removeChipAtIndex = (chipIndex: number): void => {
+    const nextIds = selectedTypeIds.filter((_, index) => index !== chipIndex);
+    onSelectedTypeIdsChange(nextIds);
+  };
+
+  const handleChipKeyDown = (
+    event: React.KeyboardEvent<HTMLSpanElement>,
+    chipIndex: number,
+  ): void => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      setFocusedChipIndex(Math.max(0, chipIndex - 1));
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      if (chipIndex >= selectedTypeIds.length - 1) {
+        focusInput();
+        return;
+      }
+      setFocusedChipIndex(chipIndex + 1);
+      return;
+    }
+    if (event.key === "Backspace" || event.key === "Delete") {
+      event.preventDefault();
+      const nextIds = selectedTypeIds.filter((_, index) => index !== chipIndex);
+      onSelectedTypeIdsChange(nextIds);
+      if (nextIds.length === 0) {
+        focusInput();
+        return;
+      }
+      if (event.key === "Backspace") {
+        setFocusedChipIndex(Math.max(0, chipIndex - 1));
+        return;
+      }
+      if (chipIndex >= nextIds.length) {
+        focusInput();
+        return;
+      }
+      setFocusedChipIndex(chipIndex);
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      onArrowDown();
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      onArrowUp();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onEscape();
+      return;
+    }
+    if (isPlainCharacterKey(event)) {
+      event.preventDefault();
+      onSearchTermChange(event.key);
+      focusInput();
+    }
+  };
+
+  const handleInputKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ): void => {
+    if (event.key === "Tab") {
+      if (uniquePrefixMatch) {
+        event.preventDefault();
+        commitNodeType(uniquePrefixMatch);
+      }
+      return;
+    }
+
+    if (event.key === "Backspace") {
+      const input = inputRef.current;
+      if (
+        input &&
+        input.selectionStart === 0 &&
+        input.selectionEnd === 0 &&
+        searchTerm.length === 0 &&
+        selectedTypeIds.length > 0
+      ) {
+        event.preventDefault();
+        setFocusedChipIndex(selectedTypeIds.length - 1);
+        return;
+      }
+    }
+
+    if (event.key === "ArrowLeft") {
+      const input = inputRef.current;
+      if (
+        input &&
+        input.selectionStart === 0 &&
+        input.selectionEnd === 0 &&
+        selectedTypeIds.length > 0
+      ) {
+        event.preventDefault();
+        setFocusedChipIndex(selectedTypeIds.length - 1);
+        return;
+      }
+    }
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      onArrowDown();
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      onArrowUp();
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (event.metaKey || event.ctrlKey) onCmdEnter();
+      else if (event.shiftKey) onShiftEnter();
+      else onEnter();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onEscape();
+    }
+  };
+
+  return (
+    <div className="flex min-w-0 flex-1 items-center gap-1 py-0.5">
+      {selectedNodeTypes.map((nodeType, index) => {
+        const isFocused = focusedChipIndex === index;
+        return (
+          <span
+            key={nodeType.type}
+            ref={(element) => {
+              chipRefs.current[index] = element;
+            }}
+            role="button"
+            tabIndex={-1}
+            onClick={() => setFocusedChipIndex(index)}
+            onKeyDown={(event) => handleChipKeyDown(event, index)}
+            style={{
+              boxShadow: isFocused
+                ? "0 0 0 2px rgba(95, 87, 192, 0.2)"
+                : undefined,
+              borderRadius: 3,
+            }}
+          >
+            <span
+              className="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs"
+              style={getNodeTagStyles(nodeType.canvasSettings?.color)}
+            >
+              <span className="truncate leading-4">{nodeType.text}</span>
+              <Button
+                className="!h-4 !min-h-0 !w-4 !min-w-0 !p-0"
+                aria-label={`Remove ${nodeType.text} filter`}
+                icon={<Icon icon="cross" size={10} />}
+                minimal
+                onClick={(event) => {
+                  event.stopPropagation();
+                  removeChipAtIndex(index);
+                  focusInput();
+                }}
+                onMouseDown={(event) => event.preventDefault()}
+                small
+              />
+            </span>
+          </span>
+        );
+      })}
+      <span className="relative min-w-0 flex-1">
+        {completionSuffix && (
+          <span className="pointer-events-none absolute inset-0 flex items-center overflow-hidden whitespace-nowrap text-sm">
+            <span className="invisible">{searchTerm}</span>
+            <span className="text-gray-400">{completionSuffix}</span>
+            <span className="ml-2 rounded bg-gray-100 px-1 text-[10px] uppercase tracking-wide text-gray-500">
+              Tab
+            </span>
+          </span>
+        )}
+        <input
+          className={`${Classes.INPUT} w-full border-none bg-transparent px-0 py-0 text-sm shadow-none outline-none placeholder:text-gray-400 focus:shadow-none`}
+          onChange={(event) => onSearchTermChange(event.target.value)}
+          onKeyDown={handleInputKeyDown}
+          placeholder={
+            selectedTypeIds.length ? "" : "Search discourse nodes..."
+          }
+          ref={inputRef}
+          spellCheck={false}
+          value={searchTerm}
+        />
+      </span>
+    </div>
+  );
+};

From 620c204db859f4bea5e084c68d1aac4cafec9f32 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Sat, 23 May 2026 23:22:05 -0400
Subject: [PATCH 2/2] final touches

---
 .../AdvancedSearchDialog.tsx                  | 30 ++++++------
 .../NodeTypeChipsSearchInput.tsx              | 46 +++++++++++--------
 2 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx b/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
index 9bce5635b..ac2da0d2f 100644
--- a/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
+++ b/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
@@ -422,7 +422,7 @@ const AdvancedNodeSearchDialog = ({
         onMouseUp={(event) => event.stopPropagation()}
         className="flex min-h-0 flex-1 flex-col overflow-hidden"
       >
-        <div className="flex flex-none items-center gap-2 border-b border-gray-200 px-3 py-2">
+        <div className="flex flex-none items-start gap-2 border-b border-gray-200 px-3 py-2">
           <div className="flex min-w-0 flex-1 items-center rounded border border-gray-300 bg-white px-2 py-1">
             <Icon icon="search" size={16} className="mr-2 text-gray-500" />
             <NodeTypeChipsSearchInput
@@ -449,19 +449,23 @@ const AdvancedNodeSearchDialog = ({
               selectedTypeIds={selectedNodeTypeIds}
             />
           </div>
-          <DiscourseNodeTypeFilter
-            nodeTypes={discourseNodes}
-            onPopoverOpenChange={setIsTypeFilterPopoverOpen}
-            onSelectedTypeIdsChange={setSelectedNodeTypeIds}
-            selectedTypeIds={selectedNodeTypeIds}
-          />
-          <DiscourseNodeSortControl
-            disabled={isIndexLoading || indexError}
-            onSortChange={handleSortChange}
-            sort={sort}
-          />
+          <div className="self-start">
+            <DiscourseNodeTypeFilter
+              nodeTypes={discourseNodes}
+              onPopoverOpenChange={setIsTypeFilterPopoverOpen}
+              onSelectedTypeIdsChange={setSelectedNodeTypeIds}
+              selectedTypeIds={selectedNodeTypeIds}
+            />
+          </div>
+          <div className="self-start">
+            <DiscourseNodeSortControl
+              disabled={isIndexLoading || indexError}
+              onSortChange={handleSortChange}
+              sort={sort}
+            />
+          </div>
           <Button
-            className="shrink-0"
+            className="shrink-0 self-start"
             icon="cross"
             minimal
             onClick={onClose}
diff --git a/apps/roam/src/components/AdvancedNodeSearchDialog/NodeTypeChipsSearchInput.tsx b/apps/roam/src/components/AdvancedNodeSearchDialog/NodeTypeChipsSearchInput.tsx
index a4d16800c..b41486a5f 100644
--- a/apps/roam/src/components/AdvancedNodeSearchDialog/NodeTypeChipsSearchInput.tsx
+++ b/apps/roam/src/components/AdvancedNodeSearchDialog/NodeTypeChipsSearchInput.tsx
@@ -21,7 +21,7 @@ type NodeTypeChipsSearchInputProps = {
 const isPlainCharacterKey = (event: React.KeyboardEvent): boolean =>
   event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey;
 
-const getUniquePrefixMatch = ({
+const getBestPrefixMatch = ({
   nodeTypes,
   query,
   selectedTypeIds,
@@ -40,7 +40,12 @@ const getUniquePrefixMatch = ({
       node.text.toLowerCase().startsWith(normalizedQuery),
   );
 
-  return matches.length === 1 ? matches[0] : null;
+  if (!matches.length) return null;
+
+  const exactMatch = matches.find(
+    (node) => node.text.toLowerCase() === normalizedQuery,
+  );
+  return exactMatch ?? matches[0];
 };
 
 export const NodeTypeChipsSearchInput = ({
@@ -76,9 +81,9 @@ export const NodeTypeChipsSearchInput = ({
     [nodeTypeById, selectedTypeIds],
   );
 
-  const uniquePrefixMatch = useMemo(
+  const bestPrefixMatch = useMemo(
     () =>
-      getUniquePrefixMatch({
+      getBestPrefixMatch({
         nodeTypes,
         query: searchTerm,
         selectedTypeIds,
@@ -87,12 +92,12 @@ export const NodeTypeChipsSearchInput = ({
   );
 
   const completionSuffix = useMemo(() => {
-    if (!uniquePrefixMatch) return "";
+    if (!bestPrefixMatch) return "";
     const normalizedQuery = searchTerm.trim();
-    const nodeText = uniquePrefixMatch.text;
+    const nodeText = bestPrefixMatch.text;
     if (nodeText.toLowerCase() === normalizedQuery.toLowerCase()) return "";
     return nodeText.slice(normalizedQuery.length);
-  }, [searchTerm, uniquePrefixMatch]);
+  }, [bestPrefixMatch, searchTerm]);
 
   useEffect(() => {
     if (focusedChipIndex < 0) return;
@@ -112,11 +117,6 @@ export const NodeTypeChipsSearchInput = ({
     onSearchTermChange("");
   };
 
-  const removeChipAtIndex = (chipIndex: number): void => {
-    const nextIds = selectedTypeIds.filter((_, index) => index !== chipIndex);
-    onSelectedTypeIdsChange(nextIds);
-  };
-
   const handleChipKeyDown = (
     event: React.KeyboardEvent<HTMLSpanElement>,
     chipIndex: number,
@@ -180,9 +180,9 @@ export const NodeTypeChipsSearchInput = ({
     event: React.KeyboardEvent<HTMLInputElement>,
   ): void => {
     if (event.key === "Tab") {
-      if (uniquePrefixMatch) {
+      if (bestPrefixMatch) {
         event.preventDefault();
-        commitNodeType(uniquePrefixMatch);
+        commitNodeType(bestPrefixMatch);
       }
       return;
     }
@@ -240,7 +240,7 @@ export const NodeTypeChipsSearchInput = ({
   };
 
   return (
-    <div className="flex min-w-0 flex-1 items-center gap-1 py-0.5">
+    <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5">
       {selectedNodeTypes.map((nodeType, index) => {
         const isFocused = focusedChipIndex === index;
         return (
@@ -262,9 +262,13 @@ export const NodeTypeChipsSearchInput = ({
           >
             <span
               className="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs"
-              style={getNodeTagStyles(nodeType.canvasSettings?.color)}
+              style={getNodeTagStyles(
+                nodeType.canvasSettings?.color ?? "#000000",
+              )}
             >
-              <span className="truncate leading-4">{nodeType.text}</span>
+              <span className="max-w-[10rem] truncate leading-4">
+                {nodeType.text}
+              </span>
               <Button
                 className="!h-4 !min-h-0 !w-4 !min-w-0 !p-0"
                 aria-label={`Remove ${nodeType.text} filter`}
@@ -272,7 +276,11 @@ export const NodeTypeChipsSearchInput = ({
                 minimal
                 onClick={(event) => {
                   event.stopPropagation();
-                  removeChipAtIndex(index);
+                  onSelectedTypeIdsChange(
+                    selectedTypeIds.filter(
+                      (_, chipIndex) => chipIndex !== index,
+                    ),
+                  );
                   focusInput();
                 }}
                 onMouseDown={(event) => event.preventDefault()}
@@ -282,7 +290,7 @@ export const NodeTypeChipsSearchInput = ({
           </span>
         );
       })}
-      <span className="relative min-w-0 flex-1">
+      <span className="relative min-w-[12ch] flex-1">
         {completionSuffix && (
           <span className="pointer-events-none absolute inset-0 flex items-center overflow-hidden whitespace-nowrap text-sm">
             <span className="invisible">{searchTerm}</span>