feat: add forceMount prop to Item and Group (#101)

Co-authored-by: Paco <34928425+pacocoursey@users.noreply.github.com>

Author: MildTomato

cmdk/src/index.tsx

@@ -31,13 +31,17 @@ type ItemProps = Children &
      * If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.
      */
     value?: string
+    /** Whether this item is forcibly rendered regardless of filtering. */
+    forceMount?: boolean
   }
 type GroupProps = Children &
   Omit<DivProps, 'heading' | 'value'> & {
     /** Optional heading to render for this group. */
     heading?: React.ReactNode
     /** If no heading is provided, you must provide a value that is unique for this group. */
     value?: string
+    /** Whether this group is forcibly rendered regardless of filtering. */
+    forceMount?: boolean
   }
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> & {
   /**
@@ -585,7 +589,13 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>((props, forwardedRef) =
   const store = useStore()
   const selected = useCmdk((state) => state.value && state.value === value.current)
   const render = useCmdk((state) =>
-    context.filter() === false ? true : !state.search ? true : state.filtered.items.get(id) > 0,
+    props.forceMount
+      ? true
+      : context.filter() === false
+      ? true
+      : !state.search
+      ? true
+      : state.filtered.items.get(id) > 0,
   )
 
   React.useEffect(() => {
@@ -637,7 +647,7 @@ const Group = React.forwardRef<HTMLDivElement, GroupProps>((props, forwardedRef)
   const headingId = React.useId()
   const context = useCommand()
   const render = useCmdk((state) =>
-    context.filter() === false ? true : !state.search ? true : state.filtered.groups.has(id),
+    props.forceMount ? true : context.filter() === false ? true : !state.search ? true : state.filtered.groups.has(id),
   )
 
   useLayoutEffect(() => {

test/group.test.ts

@@ -18,4 +18,10 @@ test.describe('group', async () => {
     await expect(page.locator(`[cmdk-group][data-value="letters"]`)).not.toBeVisible()
     await expect(page.locator(`[cmdk-group][data-value="numbers"]`)).toBeVisible()
   })
+
+  test('mounted group still rendered with filter using forceMount', async ({ page }) => {
+    await page.locator(`data-testid=forceMount`).click()
+    await page.locator(`[cmdk-input]`).type('Giraffe')
+    await expect(page.locator(`[cmdk-group][data-value="letters"]`)).toBeVisible()
+  })
 })

test/item.test.ts

@@ -47,6 +47,12 @@ test.describe('item', async () => {
     await page.locator(`data-testid=many`).click()
     await expect(page.locator(`[cmdk-item][aria-selected]`)).toHaveText('B')
   })
+
+  test('mounted item still rendered with filter usingForceMount', async ({ page }) => {
+    await page.locator(`data-testid=forceMount`).click()
+    await page.locator(`[cmdk-input]`).type('z')
+    await expect(page.locator(`[cmdk-item]`)).toHaveCount(1)
+  })
 })
 
 test.describe('item advanced', async () => {

test/pages/group.tsx

@@ -3,9 +3,14 @@ import * as React from 'react'
 
 const Page = () => {
   const [search, setSearch] = React.useState('')
+  const [forceMount, setForceMount] = React.useState(false)
 
   return (
     <div>
+      <button data-testid="forceMount" onClick={() => setForceMount(!forceMount)}>
+        Force mount Group Letters
+      </button>
+
       <Command>
         <Command.Input placeholder="Search…" value={search} onValueChange={setSearch} />
         <Command.List>
@@ -15,7 +20,7 @@ const Page = () => {
             <Command.Item>Chicken</Command.Item>
           </Command.Group>
 
-          <Command.Group heading="Letters">
+          <Command.Group forceMount={forceMount} heading="Letters">
             <Command.Item>A</Command.Item>
             <Command.Item>B</Command.Item>
             <Command.Item>Z</Command.Item>

test/pages/item.tsx

@@ -5,6 +5,7 @@ const Page = () => {
   const [unmount, setUnmount] = React.useState(false)
   const [mount, setMount] = React.useState(false)
   const [many, setMany] = React.useState(false)
+  const [forceMount, setForceMount] = React.useState(false)
 
   return (
     <div>
@@ -20,11 +21,15 @@ const Page = () => {
         Toggle many items
       </button>
 
+      <button data-testid="forceMount" onClick={() => setForceMount(!forceMount)}>
+        Force mount item A
+      </button>
+
       <Command>
         <Command.Input placeholder="Search…" />
         <Command.List>
           <Command.Empty>No results.</Command.Empty>
-          {!unmount && <Command.Item>A</Command.Item>}
+          {!unmount && <Command.Item forceMount={forceMount}>A</Command.Item>}
           {many && (
             <>
               <Command.Item>1</Command.Item>