Use [hidden] on group instead of changing render structure

README.md

@@ -192,7 +192,7 @@ Item that becomes active on pointer enter. You should provide a unique `value` f
 </Command.Item>
 ```
 
-### Group `[cmdk-group]`
+### Group `[cmdk-group]` `[hidden?]`
 
 Groups items together with the given `heading` (`[cmdk-group-heading]`).
 
@@ -202,6 +202,8 @@ Groups items together with the given `heading` (`[cmdk-group-heading]`).
 </Command.Group>
 ```
 
+Groups will not unmount from the DOM, rather the `hidden` attribute is applied to hide it from view. This may be relevant in your styling.
+
 ### Separator `[cmdk-separator]`
 
 Visible when the search query is empty or `alwaysRender` is true, hidden otherwise.

cmdk/src/index.tsx

@@ -627,12 +627,14 @@ const Group = React.forwardRef<HTMLDivElement, GroupProps>((props, forwardedRef)
 
   const inner = <GroupContext.Provider value={id}>{children}</GroupContext.Provider>
 
-  // When this group is not rendered, still render rhe children to keep them in the React tree
-  // however each of them should be rendering `null`, so this won't result in any DOM output
-  if (!render) return inner
-
   return (
-    <div ref={mergeRefs([ref, forwardedRef])} {...etc} cmdk-group="" role="presentation">
+    <div
+      ref={mergeRefs([ref, forwardedRef])}
+      {...etc}
+      cmdk-group=""
+      role="presentation"
+      hidden={render ? undefined : true}
+    >
       {heading && (
         <div ref={headingRef} cmdk-group-heading="" aria-hidden id={headingId}>
           {heading}

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "scripts": {
     "build": "pnpm -F cmdk build",
+    "dev": "pnpm -F cmdk build --watch",
     "website": "pnpm -F cmdk-website dev",
     "testsite": "pnpm -F cmdk-tests dev",
     "test": "playwright test"

playwright.config.ts

@@ -11,7 +11,7 @@ const config: PlaywrightTestConfig = {
   },
   timeout: 5000,
   webServer: {
-    command: 'npm run test',
+    command: 'npm run dev',
     url: 'http://localhost:3000',
     cwd: './test',
     reuseExistingServer: !process.env.CI,

test/group.test.ts

@@ -7,15 +7,15 @@ test.describe('group', async () => {
 
   test('groups are shown/hidden based on item matches', async ({ page }) => {
     await page.locator(`[cmdk-input]`).type('z')
-    await expect(page.locator(`[cmdk-group][data-value="animals"]`)).not.toHaveCount(1)
-    await expect(page.locator(`[cmdk-group][data-value="letters"]`)).toHaveCount(1)
+    await expect(page.locator(`[cmdk-group][data-value="animals"]`)).not.toBeVisible()
+    await expect(page.locator(`[cmdk-group][data-value="letters"]`)).toBeVisible()
   })
 
   test('group can be progressively rendered', async ({ page }) => {
-    await expect(page.locator(`[cmdk-group][data-value="numbers"]`)).not.toHaveCount(1)
+    await expect(page.locator(`[cmdk-group][data-value="numbers"]`)).not.toBeVisible()
     await page.locator(`[cmdk-input]`).type('t')
-    await expect(page.locator(`[cmdk-group][data-value="animals"]`)).not.toHaveCount(1)
-    await expect(page.locator(`[cmdk-group][data-value="letters"]`)).not.toHaveCount(1)
-    await expect(page.locator(`[cmdk-group][data-value="numbers"]`)).toHaveCount(1)
+    await expect(page.locator(`[cmdk-group][data-value="animals"]`)).not.toBeVisible()
+    await expect(page.locator(`[cmdk-group][data-value="letters"]`)).not.toBeVisible()
+    await expect(page.locator(`[cmdk-group][data-value="numbers"]`)).toBeVisible()
   })
 })

test/package.json

@@ -2,7 +2,7 @@
   "name": "cmdk-tests",
   "version": "0.0.0",
   "scripts": {
-    "test": "next"
+    "dev": "next"
   },
   "dependencies": {
     "@types/node": "18.0.4",

website/styles/cmdk/raycast.scss

@@ -271,7 +271,7 @@
     margin: 4px 0;
   }
 
-  * + [cmdk-group] {
+  *:not([hidden]) + [cmdk-group] {
     margin-top: 8px;
   }
 

website/styles/cmdk/vercel.scss

@@ -81,7 +81,7 @@
       background: var(--gray4);
     }
 
-    &+[cmdk-item] {
+    & + [cmdk-item] {
       margin-top: 4px;
     }
 
@@ -128,7 +128,7 @@
     margin: 4px 0;
   }
 
-  *+[cmdk-group] {
+  *:not([hidden]) + [cmdk-group] {
     margin-top: 8px;
   }
 
@@ -151,4 +151,4 @@
     white-space: pre-wrap;
     color: var(--gray11);
   }
-}
+}