Address PR review: Blueprint Tag chips, alignment, and arrow guard.

Use Tag with getNodeTagStyles for filter chips while keeping a custom input for ghost Tab completion. Fix header alignment, Roam-safe styling, remove unnecessary memos, and guard ArrowDown when there are no results.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: trangdoan982

apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx

@@ -357,7 +357,9 @@ const AdvancedNodeSearchDialog = ({
       if (event.defaultPrevented) return;
       if (event.key === "ArrowDown" && results.length) {
         event.preventDefault();
-        setActiveIndex((index) => Math.min(index + 1, results.length - 1));
+        setActiveIndex((index) =>
+          Math.min(Math.max(index, 0) + 1, results.length - 1),
+        );
       } else if (event.key === "ArrowUp" && results.length) {
         event.preventDefault();
         setActiveIndex((index) => Math.max(index - 1, 0));
@@ -422,20 +424,22 @@ const AdvancedNodeSearchDialog = ({
         onMouseUp={(event) => event.stopPropagation()}
         className="flex min-h-0 flex-1 flex-col overflow-hidden"
       >
-        <div className="flex flex-none items-start gap-2 border-b border-gray-200 px-3 py-2">
+        <div className="flex flex-none items-center 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
               inputRef={inputRef}
               nodeTypes={discourseNodes}
-              onArrowDown={() =>
+              onArrowDown={() => {
+                if (!results.length) return;
                 setActiveIndex((index) =>
-                  Math.min(index + 1, results.length - 1),
-                )
-              }
-              onArrowUp={() =>
-                setActiveIndex((index) => Math.max(index - 1, 0))
-              }
+                  Math.min(Math.max(index, 0) + 1, results.length - 1),
+                );
+              }}
+              onArrowUp={() => {
+                if (!results.length) return;
+                setActiveIndex((index) => Math.max(index - 1, 0));
+              }}
               onCmdEnter={() => void onInsert()}
               onEnter={() => void onOpen()}
               onEscape={() => {
@@ -449,23 +453,19 @@ const AdvancedNodeSearchDialog = ({
               selectedTypeIds={selectedNodeTypeIds}
             />
           </div>
-          <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>
+          <DiscourseNodeTypeFilter
+            nodeTypes={discourseNodes}
+            onPopoverOpenChange={setIsTypeFilterPopoverOpen}
+            onSelectedTypeIdsChange={setSelectedNodeTypeIds}
+            selectedTypeIds={selectedNodeTypeIds}
+          />
+          <DiscourseNodeSortControl
+            disabled={isIndexLoading || indexError}
+            onSortChange={handleSortChange}
+            sort={sort}
+          />
           <Button
-            className="shrink-0 self-start"
+            className="shrink-0"
             icon="cross"
             minimal
             onClick={onClose}

apps/roam/src/components/AdvancedNodeSearchDialog/NodeTypeChipsSearchInput.tsx

@@ -1,5 +1,5 @@
-import { Button, Classes, Icon } from "@blueprintjs/core";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Classes, Tag } from "@blueprintjs/core";
+import React, { useEffect, useRef, useState } from "react";
 import { getNodeTagStyles } from "~/utils/getDiscourseNodeColors";
 import { type DiscourseNode } from "~/utils/getDiscourseNodes";
 
@@ -18,6 +18,9 @@ type NodeTypeChipsSearchInputProps = {
   onEscape: () => void;
 };
 
+const CHIP_LABEL_MAX_WIDTH = "10rem";
+const INPUT_MIN_WIDTH = "12ch";
+
 const isPlainCharacterKey = (event: React.KeyboardEvent): boolean =>
   event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey;
 
@@ -48,6 +51,20 @@ const getBestPrefixMatch = ({
   return exactMatch ?? matches[0];
 };
 
+const getCompletionSuffix = ({
+  bestPrefixMatch,
+  searchTerm,
+}: {
+  bestPrefixMatch: DiscourseNode | null;
+  searchTerm: string;
+}): string => {
+  if (!bestPrefixMatch) return "";
+  const normalizedQuery = searchTerm.trim();
+  const nodeText = bestPrefixMatch.text;
+  if (nodeText.toLowerCase() === normalizedQuery.toLowerCase()) return "";
+  return nodeText.slice(normalizedQuery.length);
+};
+
 export const NodeTypeChipsSearchInput = ({
   nodeTypes,
   searchTerm,
@@ -65,39 +82,21 @@ export const NodeTypeChipsSearchInput = ({
   const [focusedChipIndex, setFocusedChipIndex] = useState(-1);
   const chipRefs = useRef<(HTMLSpanElement | null)[]>([]);
 
-  const nodeTypeById = useMemo(
-    () =>
-      Object.fromEntries(
-        nodeTypes.map((nodeType) => [nodeType.type, nodeType]),
-      ),
-    [nodeTypes],
-  );
+  const nodeTypeById = Object.fromEntries(
+    nodeTypes.map((nodeType) => [nodeType.type, nodeType]),
+  ) as Record<string, DiscourseNode | undefined>;
 
-  const selectedNodeTypes = useMemo(
-    () =>
-      selectedTypeIds
-        .map((typeId) => nodeTypeById[typeId])
-        .filter((nodeType): nodeType is DiscourseNode => !!nodeType),
-    [nodeTypeById, selectedTypeIds],
-  );
+  const selectedNodeTypes = selectedTypeIds
+    .map((typeId) => nodeTypeById[typeId])
+    .filter((nodeType): nodeType is DiscourseNode => !!nodeType);
 
-  const bestPrefixMatch = useMemo(
-    () =>
-      getBestPrefixMatch({
-        nodeTypes,
-        query: searchTerm,
-        selectedTypeIds,
-      }),
-    [nodeTypes, searchTerm, selectedTypeIds],
-  );
+  const bestPrefixMatch = getBestPrefixMatch({
+    nodeTypes,
+    query: searchTerm,
+    selectedTypeIds,
+  });
 
-  const completionSuffix = useMemo(() => {
-    if (!bestPrefixMatch) return "";
-    const normalizedQuery = searchTerm.trim();
-    const nodeText = bestPrefixMatch.text;
-    if (nodeText.toLowerCase() === normalizedQuery.toLowerCase()) return "";
-    return nodeText.slice(normalizedQuery.length);
-  }, [bestPrefixMatch, searchTerm]);
+  const completionSuffix = getCompletionSuffix({ bestPrefixMatch, searchTerm });
 
   useEffect(() => {
     if (focusedChipIndex < 0) return;
@@ -254,48 +253,44 @@ export const NodeTypeChipsSearchInput = ({
             onClick={() => setFocusedChipIndex(index)}
             onKeyDown={(event) => handleChipKeyDown(event, index)}
             style={{
+              borderRadius: 3,
               boxShadow: isFocused
                 ? "0 0 0 2px rgba(95, 87, 192, 0.2)"
                 : undefined,
-              borderRadius: 3,
+              display: "inline-flex",
             }}
           >
-            <span
-              className="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs"
+            <Tag
+              active={isFocused}
+              htmlTitle={nodeType.text}
+              minimal
+              onRemove={(event) => {
+                event.stopPropagation();
+                onSelectedTypeIdsChange(
+                  selectedTypeIds.filter((_, chipIndex) => chipIndex !== index),
+                );
+                focusInput();
+              }}
               style={getNodeTagStyles(
                 nodeType.canvasSettings?.color ?? "#000000",
               )}
             >
-              <span className="max-w-[10rem] truncate leading-4">
+              <span
+                className="truncate"
+                style={{ maxWidth: CHIP_LABEL_MAX_WIDTH }}
+              >
                 {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();
-                  onSelectedTypeIdsChange(
-                    selectedTypeIds.filter(
-                      (_, chipIndex) => chipIndex !== index,
-                    ),
-                  );
-                  focusInput();
-                }}
-                onMouseDown={(event) => event.preventDefault()}
-                small
-              />
-            </span>
+            </Tag>
           </span>
         );
       })}
-      <span className="relative min-w-[12ch] flex-1">
+      <span className="relative flex-1" style={{ minWidth: INPUT_MIN_WIDTH }}>
         {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">
+            <span className="ml-2 rounded bg-gray-100 px-1 text-xs uppercase tracking-wide text-gray-500">
               Tab
             </span>
           </span>