feat(cmdk): Invoke onAction callback for actions with children

When a CMDKAction has both an onAction callback and children, selecting
it now invokes the callback immediately and keeps the modal open so the
user can choose a secondary action from the children.

Previously, actions with children were treated purely as navigation
groups — the onAction callback was silently ignored. Now the callback
fires before the palette pushes into the child list.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: JonasBa

static/app/components/commandPalette/ui/commandPalette.spec.tsx

@@ -366,6 +366,64 @@ describe('CommandPalette', () => {
     });
   });
 
+  describe('action with onAction and children', () => {
+    it('invokes callback, keeps modal open, and then shows children for secondary selection', async () => {
+      const primaryCallback = jest.fn();
+      const secondaryCallback = jest.fn();
+      const closeSpy = jest.spyOn(modalActions, 'closeModal');
+
+      // Mirror the updated modal.tsx handleSelect: invoke callback, skip close when
+      // action has children so the palette can push into the secondary actions.
+      const handleAction = (action: CollectionTreeNode<CMDKActionData>) => {
+        if ('onAction' in action) {
+          action.onAction();
+          if (action.children.length > 0) {
+            return;
+          }
+        }
+        closeModal();
+      };
+
+      // Top-level groups become section headers (disabled), so the action-with-callback
+      // must be a child item — matching how "Parent Group Action" works in allActions.
+      render(
+        <CommandPaletteProvider>
+          <CMDKAction display={{label: 'Outer Group'}}>
+            <CMDKAction display={{label: 'Primary Action'}} onAction={primaryCallback}>
+              <CMDKAction
+                display={{label: 'Secondary Action'}}
+                onAction={secondaryCallback}
+              />
+            </CMDKAction>
+          </CMDKAction>
+          <CommandPalette onAction={handleAction} />
+        </CommandPaletteProvider>
+      );
+
+      // Select the primary action (has both onAction and children)
+      await userEvent.click(await screen.findByRole('option', {name: 'Primary Action'}));
+
+      // Callback should have been invoked
+      expect(primaryCallback).toHaveBeenCalledTimes(1);
+
+      // Modal must remain open — no close call yet
+      expect(closeSpy).not.toHaveBeenCalled();
+
+      // The palette should have pushed into the children
+      expect(
+        await screen.findByRole('option', {name: 'Secondary Action'})
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('option', {name: 'Primary Action'})
+      ).not.toBeInTheDocument();
+
+      // Selecting the secondary action should invoke its callback and close the modal
+      await userEvent.click(screen.getByRole('option', {name: 'Secondary Action'}));
+      expect(secondaryCallback).toHaveBeenCalledTimes(1);
+      expect(closeSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('query restoration', () => {
     it('drilling into a group clears the active query', async () => {
       render(<GlobalActionsComponent actions={allActions} />);
@@ -580,7 +638,7 @@ describe('CommandPalette', () => {
     it('a group with no children is omitted from the list', async () => {
       render(
         <CommandPaletteProvider>
-          <CMDKGroup display={{label: 'Empty Group'}} />
+          <CMDKAction display={{label: 'Empty Group'}} />
           <CMDKAction display={{label: 'Real Action'}} onAction={jest.fn()} />
           <CommandPalette onAction={jest.fn()} />
         </CommandPaletteProvider>

static/app/components/commandPalette/ui/commandPalette.tsx

@@ -212,6 +212,11 @@ export function CommandPalette(props: CommandPaletteProps) {
 
       if (action.children.length > 0) {
         analytics.recordGroupAction(action, resultIndex);
+        if ('onAction' in action) {
+          // Invoke the callback but keep the modal open so users can select
+          // secondary actions from the children that follow.
+          props.onAction(action);
+        }
         dispatch({type: 'push action', key: action.key, label: action.display.label});
         return;
       }

static/app/components/commandPalette/ui/modal.tsx

@@ -20,6 +20,11 @@ export default function CommandPaletteModal({Body}: ModalRenderProps) {
         navigate(normalizeUrl(String(action.to)));
       } else if ('onAction' in action) {
         action.onAction();
+        // When the action has children, the palette will push into them so the
+        // user can select a secondary action — keep the modal open.
+        if (action.children.length > 0) {
+          return;
+        }
       }
       closeModal();
     },