fix(cmdk): Omit empty groups and reset scroll on query change

Empty CMDKGroups (no registered children) were appearing as clickable
action items in browse mode. Filter them out in flattenActions so only
groups with children or executable actions are shown.

Also reset the results list scroll position to the top whenever the
search query changes. The actual scroll element is the inner virtualizer
container inside ListBox, not the outer ResultsList wrapper, so expose
a scrollContainerRef prop on ListBox and wire it up in CommandPalette's
onChange handler.

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

Author: JonasBa

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

@@ -577,6 +577,21 @@ describe('CommandPalette', () => {
       expect(screen.getAllByRole('option', {name: 'Action B'})).toHaveLength(1);
     });
 
+    it('a group with no children is omitted from the list', async () => {
+      render(
+        <CommandPaletteProvider>
+          <CMDKGroup display={{label: 'Empty Group'}} />
+          <CMDKAction display={{label: 'Real Action'}} onAction={jest.fn()} />
+          <CommandPalette onAction={jest.fn()} />
+        </CommandPaletteProvider>
+      );
+
+      expect(
+        await screen.findByRole('option', {name: 'Real Action'})
+      ).toBeInTheDocument();
+      expect(screen.queryByRole('option', {name: 'Empty Group'})).not.toBeInTheDocument();
+    });
+
     it('direct CMDKAction registrations outside slots are not duplicated', async () => {
       render(
         <CommandPaletteProvider>

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

@@ -1,4 +1,4 @@
-import {Fragment, useCallback, useLayoutEffect, useMemo} from 'react';
+import {Fragment, useCallback, useLayoutEffect, useMemo, useRef} from 'react';
 import {preload} from 'react-dom';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -223,6 +223,8 @@ export function CommandPalette(props: CommandPaletteProps) {
     [actions, analytics, dispatch, props]
   );
 
+  const resultsListRef = useRef<HTMLDivElement>(null);
+
   const debouncedQuery = useDebouncedValue(state.query, 300);
 
   const isLoading = state.query.length > 0 && debouncedQuery !== state.query;
@@ -287,6 +289,9 @@ export function CommandPalette(props: CommandPaletteProps) {
                     onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
                       dispatch({type: 'set query', query: e.target.value});
                       treeState.selectionManager.setFocusedKey(null);
+                      if (resultsListRef.current) {
+                        resultsListRef.current.scrollTop = 0;
+                      }
                     },
                     onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
                       if (e.key === 'Backspace' && state.query.length === 0) {
@@ -364,6 +369,7 @@ export function CommandPalette(props: CommandPaletteProps) {
           overflow="auto"
         >
           <ListBox
+            scrollContainerRef={resultsListRef}
             listState={treeState}
             keyDownHandler={() => true}
             overlayIsOpen
@@ -448,6 +454,11 @@ function flattenActions(
     const results: CMDKFlatItem[] = [];
     for (const node of nodes) {
       const isGroup = node.children.length > 0;
+      // Skip groups that have no children and no executable action — they are
+      // empty section headers (e.g. a CMDKGroup whose children didn't render).
+      if (!isGroup && !('to' in node) && !('onAction' in node)) {
+        continue;
+      }
       results.push({...node, listItemType: isGroup ? 'section' : 'action'});
       if (isGroup) {
         for (const child of node.children) {

static/app/components/core/compactSelect/listBox/index.tsx

@@ -82,6 +82,11 @@ interface ListBoxProps<T extends ObjectLike>
    */
   overlayIsOpen?: boolean;
   ref?: React.Ref<HTMLUListElement>;
+  /**
+   * Ref forwarded to the inner scroll container div (the element the virtualizer
+   * uses as its scroll element). Useful for callers that need to reset scrollTop.
+   */
+  scrollContainerRef?: React.Ref<HTMLDivElement>;
   /**
    * Whether the select has a search input field.
    */
@@ -139,6 +144,7 @@ export function ListBox<T extends ObjectLike>({
   showDetails = true,
   onAction,
   virtualized,
+  scrollContainerRef,
   className,
   ...props
 }: ListBoxProps<T>) {
@@ -188,15 +194,15 @@ export function ListBox<T extends ObjectLike>({
   const virtualizer = useVirtualizedItems({listItems, virtualized, size});
 
   const refs = useMemo(() => {
-    const scrollContainerRef = (scrollContainer: HTMLDivElement | null) => {
+    const overflowTracker = (scrollContainer: HTMLDivElement | null) => {
       if (hasEverOverflowed || listItems.length === 0 || !scrollContainer) {
         return;
       }
 
       setHasEverOverflowed(scrollContainer.scrollHeight > scrollContainer.clientHeight);
     };
-    return mergeRefs(scrollContainerRef, virtualizer.scrollElementRef);
-  }, [hasEverOverflowed, virtualizer.scrollElementRef, listItems]);
+    return mergeRefs(overflowTracker, virtualizer.scrollElementRef, scrollContainerRef);
+  }, [hasEverOverflowed, virtualizer.scrollElementRef, listItems, scrollContainerRef]);
 
   return (
     <Fragment>