ref(cmdk) apply limit to query

JonasBa · JonasBa · commit 6389b740c5bf · 2026-04-10T07:13:17.000+02:00
diff --git a/static/app/components/commandPalette/ui/cmdk.tsx b/static/app/components/commandPalette/ui/cmdk.tsx
@@ -20,6 +20,7 @@ interface DisplayProps {
 interface CMDKActionDataBase {
   display: DisplayProps;
   keywords?: string[];
+  limit?: number;
   ref?: React.RefObject<HTMLElement | null>;
 }
 
@@ -65,7 +66,8 @@ interface CMDKActionProps {
   children?: React.ReactNode | ((data: CommandPaletteAction[]) => React.ReactNode);
   keywords?: string[];
   /**
-   * Maximum number of results to show when using a resource. Defaults to 4.
+   * Maximum number of results to show. For async resources the default is 4;
+   * for static children there is no limit unless this prop is set explicitly.
    */
   limit?: number;
   onAction?: () => void;
@@ -86,16 +88,20 @@ export function CMDKAction({
   to,
   onAction,
   resource,
-  limit = 4,
+  limit,
 }: CMDKActionProps) {
   const ref = CommandPaletteSlot.useSlotOutletRef();
 
+  // For async resources, default to 4 when no explicit limit is given.
+  // For static children, undefined means no limit.
+  const effectiveLimit = limit ?? (resource ? 4 : undefined);
+
   const nodeData: CMDKActionData =
     to === undefined
       ? onAction === undefined
-        ? {display, keywords, ref, resource}
-        : {display, keywords, ref, onAction}
-      : {display, keywords, ref, to};
+        ? {display, keywords, ref, resource, limit: effectiveLimit}
+        : {display, keywords, ref, onAction, limit: effectiveLimit}
+      : {display, keywords, ref, to, limit: effectiveLimit};
 
   const key = CMDKCollection.useRegisterNode(nodeData);
   const {query} = useCommandPaletteState();
@@ -113,11 +119,7 @@ export function CMDKAction({
   }
 
   const resolvedChildren =
-    typeof children === 'function'
-      ? data
-        ? children(data.slice(0, limit))
-        : null
-      : children;
+    typeof children === 'function' ? (data ? children(data) : null) : children;
 
   return (
     <CMDKCollection.Context.Provider value={key}>
diff --git a/static/app/components/commandPalette/ui/commandPalette.spec.tsx b/static/app/components/commandPalette/ui/commandPalette.spec.tsx
@@ -439,6 +439,130 @@ describe('CommandPalette', () => {
       expect(screen.queryByRole('option', {name: 'Action 6'})).not.toBeInTheDocument();
     });
 
+    it('limits static children when limit prop is set', async () => {
+      render(
+        <GlobalActionsComponent>
+          <CMDKAction display={{label: 'Static Group'}} limit={2}>
+            <CMDKAction display={{label: 'Item 1'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Item 2'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Item 3'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Item 4'}} onAction={jest.fn()} />
+          </CMDKAction>
+        </GlobalActionsComponent>
+      );
+
+      await screen.findByRole('option', {name: 'Item 1'});
+      const actionOptions = screen
+        .getAllByRole('option')
+        .filter(el => !el.hasAttribute('aria-disabled'));
+      expect(actionOptions).toHaveLength(2);
+      expect(screen.queryByRole('option', {name: 'Item 3'})).not.toBeInTheDocument();
+      expect(screen.queryByRole('option', {name: 'Item 4'})).not.toBeInTheDocument();
+    });
+
+    it('does not limit static children when limit prop is not set', async () => {
+      render(
+        <GlobalActionsComponent>
+          <CMDKAction display={{label: 'Static Group'}}>
+            <CMDKAction display={{label: 'Item 1'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Item 2'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Item 3'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Item 4'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Item 5'}} onAction={jest.fn()} />
+          </CMDKAction>
+        </GlobalActionsComponent>
+      );
+
+      await screen.findByRole('option', {name: 'Item 5'});
+      const actionOptions = screen
+        .getAllByRole('option')
+        .filter(el => !el.hasAttribute('aria-disabled'));
+      expect(actionOptions).toHaveLength(5);
+    });
+
+    it('items beyond the limit are still searchable', async () => {
+      render(
+        <GlobalActionsComponent>
+          <CMDKAction display={{label: 'Static Group'}} limit={2}>
+            <CMDKAction display={{label: 'Alpha 1'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Alpha 2'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Beta 3'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Beta 4'}} onAction={jest.fn()} />
+          </CMDKAction>
+        </GlobalActionsComponent>
+      );
+
+      // Without a query, only the first 2 items should be visible
+      await screen.findByRole('option', {name: 'Alpha 1'});
+      expect(screen.queryByRole('option', {name: 'Beta 3'})).not.toBeInTheDocument();
+
+      // Searching for "Beta" should surface items 3 and 4 even though they are
+      // beyond the default limit — the limit must be applied after filtering,
+      // not before, so it never hides matching results from the user.
+      const input = screen.getByRole('textbox', {name: 'Search commands'});
+      await userEvent.type(input, 'Beta');
+
+      expect(await screen.findByRole('option', {name: 'Beta 3'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Beta 4'})).toBeInTheDocument();
+    });
+
+    it('limit is applied after search — only top matches up to the limit are shown', async () => {
+      render(
+        <GlobalActionsComponent>
+          <CMDKAction display={{label: 'Static Group'}} limit={2}>
+            <CMDKAction display={{label: 'Item 1'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Item 2'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Item 3'}} onAction={jest.fn()} />
+            <CMDKAction display={{label: 'Item 4'}} onAction={jest.fn()} />
+          </CMDKAction>
+        </GlobalActionsComponent>
+      );
+
+      const input = await screen.findByRole('textbox', {name: 'Search commands'});
+      await userEvent.type(input, 'Item');
+
+      expect(await screen.findByRole('option', {name: 'Item 1'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Item 2'})).toBeInTheDocument();
+      expect(screen.queryByRole('option', {name: 'Item 3'})).not.toBeInTheDocument();
+      expect(screen.queryByRole('option', {name: 'Item 4'})).not.toBeInTheDocument();
+    });
+
+    it('limit is applied after search for async resource results', async () => {
+      const actions = makeActions(6);
+
+      render(
+        <GlobalActionsComponent>
+          <CMDKAction
+            display={{label: 'Async Group'}}
+            limit={2}
+            resource={() => ({
+              queryKey: ['test-resource-search-limit'],
+              queryFn: async () => actions,
+            })}
+          >
+            {data =>
+              data.map(action =>
+                'to' in action ? (
+                  <CMDKAction
+                    key={action.display.label}
+                    display={action.display}
+                    to={action.to}
+                  />
+                ) : null
+              )
+            }
+          </CMDKAction>
+        </GlobalActionsComponent>
+      );
+
+      const input = await screen.findByRole('textbox', {name: 'Search commands'});
+      await userEvent.type(input, 'Action');
+
+      expect(await screen.findByRole('option', {name: 'Action 1'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Action 2'})).toBeInTheDocument();
+      expect(screen.queryByRole('option', {name: 'Action 3'})).not.toBeInTheDocument();
+    });
+
     it('respects a custom limit prop', async () => {
       const actions = makeActions(6);
 
diff --git a/static/app/components/commandPalette/ui/commandPalette.tsx b/static/app/components/commandPalette/ui/commandPalette.tsx
@@ -479,7 +479,9 @@ function flattenActions(
 
       results.push({...node, listItemType: isGroup ? 'section' : 'action'});
       if (isGroup) {
-        for (const child of node.children) {
+        const visibleChildren =
+          node.limit === undefined ? node.children : node.children.slice(0, node.limit);
+        for (const child of visibleChildren) {
           results.push({...child, listItemType: 'action'});
         }
       }
@@ -513,32 +515,39 @@ function flattenActions(
     return maxScore(b) - maxScore(a);
   });
 
+  // Track processed keys inline so children beyond a group's limit cannot
+  // resurface as standalone flat items later in the traversal.
+  const seen = new Set<string>();
+
   const flattened = collected.flatMap((item): CMDKFlatItem[] => {
+    if (seen.has(item.key)) return [];
+    seen.add(item.key);
+
     if (item.children.length > 0) {
       const matched = item.children.filter(c => scores.get(c.key)?.score.matched);
       if (!matched.length) return [];
+      const sortedMatches = matched.sort(
+        (a, b) =>
+          (scores.get(b.key)?.score.score ?? 0) - (scores.get(a.key)?.score.score ?? 0)
+      );
+      const limitedMatches =
+        item.limit === undefined ? sortedMatches : sortedMatches.slice(0, item.limit);
+      // Mark every child as seen — including those beyond the limit — so they
+      // cannot appear as independent flat items after the group is processed.
+      for (const child of item.children) {
+        seen.add(child.key);
+      }
       return [
         // Suffix the header key so a group used as both a section header and
         // an action item inside its parent doesn't produce duplicate React keys.
         {...item, key: `${item.key}:header`, listItemType: 'section'},
-        ...matched
-          .sort(
-            (a, b) =>
-              (scores.get(b.key)?.score.score ?? 0) -
-              (scores.get(a.key)?.score.score ?? 0)
-          )
-          .map(c => ({...c, listItemType: 'action' as const})),
+        ...limitedMatches.map(c => ({...c, listItemType: 'action' as const})),
       ];
     }
     return scores.get(item.key)?.score.matched ? [{...item, listItemType: 'action'}] : [];
   });
 
-  const seen = new Set<string>();
-  return flattened.filter(item => {
-    if (seen.has(item.key)) return false;
-    seen.add(item.key);
-    return true;
-  });
+  return flattened;
 }
 
 function makeMenuItemFromAction(action: CMDKFlatItem): CommandPaletteActionMenuItem {
diff --git a/static/app/components/commandPalette/ui/commandPaletteGlobalActions.tsx b/static/app/components/commandPalette/ui/commandPaletteGlobalActions.tsx
@@ -208,7 +208,10 @@ export function GlobalCommandPaletteActions() {
           )}
         </CMDKAction>
 
-        <CMDKAction display={{label: t('Project Settings'), icon: <IconSettings />}}>
+        <CMDKAction
+          display={{label: t('Project Settings'), icon: <IconSettings />}}
+          limit={4}
+        >
           {projects.map(project => (
             <CMDKAction
               key={project.id}
@@ -287,6 +290,7 @@ export function GlobalCommandPaletteActions() {
         <CMDKAction
           display={{label: t('Project DSN Keys'), icon: <IconLock locked />}}
           keywords={[t('client keys'), t('dsn keys')]}
+          limit={4}
         >
           {projects.map(project => (
             <CMDKAction
@@ -375,7 +379,7 @@ export function GlobalCommandPaletteActions() {
               select: data => {
                 const results = [];
                 for (const index of data) {
-                  for (const hit of index.hits.slice(0, 3)) {
+                  for (const hit of index.hits) {
                     results.push({
                       display: {
                         label: DOMPurify.sanitize(hit.title ?? '', {ALLOWED_TAGS: []}),
