From b9cb93eb26b000de6f53ccd490d0628082698b17 Mon Sep 17 00:00:00 2001
From: Vlad Tansky <vl.tansky@gmail.com>
Date: Thu, 15 Feb 2024 09:52:07 +0200
Subject: [PATCH] fix: controlled search change with hidden Command.List

---
 cmdk/src/index.tsx    |  2 +-
 test/pages/portal.tsx | 64 +++++++++++++++++++++++++------------------
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/cmdk/src/index.tsx b/cmdk/src/index.tsx
index f8cd64fe..6969c475 100644
--- a/cmdk/src/index.tsx
+++ b/cmdk/src/index.tsx
@@ -469,7 +469,7 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
   }
 
   function getValidItems() {
-    return Array.from(listInnerRef.current?.querySelectorAll(VALID_ITEM_SELECTOR))
+    return Array.from(listInnerRef.current?.querySelectorAll(VALID_ITEM_SELECTOR) ?? [])
   }
 
   /** Setters */
diff --git a/test/pages/portal.tsx b/test/pages/portal.tsx
index 4fd2eda4..f4b59ce8 100644
--- a/test/pages/portal.tsx
+++ b/test/pages/portal.tsx
@@ -4,41 +4,51 @@ import * as Portal from '@radix-ui/react-portal'
 
 const Page = () => {
   const [render, setRender] = React.useState(false)
+  const [search, setSearch] = React.useState('')
+  const [open, setOpen] = React.useState(true)
   React.useEffect(() => setRender(true), [])
   if (!render) return null
 
   return (
     <div>
+      <button data-testid="controlledSearch" onClick={() => setSearch('eat')}>
+        Change search value
+      </button>
+      <button data-testid="openClosePopover" onClick={() => setOpen((val) => !val)}>
+        {open ? 'Close' : 'Open'}
+      </button>
       <Command className="root">
-        <Command.Input placeholder="Search…" className="input" />
+        <Command.Input value={search} onValueChange={setSearch} placeholder="Search…" className="input" />
 
         <Portal.Root data-portal="true">
-          <Command.List className="list">
-            <Command.Item className="item">Apple</Command.Item>
-            <Command.Item className="item">Banana</Command.Item>
-            <Command.Item className="item">Cherry</Command.Item>
-            <Command.Item className="item">Dragonfruit</Command.Item>
-            <Command.Item className="item">Elderberry</Command.Item>
-            <Command.Item className="item">Fig</Command.Item>
-            <Command.Item className="item">Grape</Command.Item>
-            <Command.Item className="item">Honeydew</Command.Item>
-            <Command.Item className="item">Jackfruit</Command.Item>
-            <Command.Item className="item">Kiwi</Command.Item>
-            <Command.Item className="item">Lemon</Command.Item>
-            <Command.Item className="item">Mango</Command.Item>
-            <Command.Item className="item">Nectarine</Command.Item>
-            <Command.Item className="item">Orange</Command.Item>
-            <Command.Item className="item">Papaya</Command.Item>
-            <Command.Item className="item">Quince</Command.Item>
-            <Command.Item className="item">Raspberry</Command.Item>
-            <Command.Item className="item">Strawberry</Command.Item>
-            <Command.Item className="item">Tangerine</Command.Item>
-            <Command.Item className="item">Ugli</Command.Item>
-            <Command.Item className="item">Watermelon</Command.Item>
-            <Command.Item className="item">Xigua</Command.Item>
-            <Command.Item className="item">Yuzu</Command.Item>
-            <Command.Item className="item">Zucchini</Command.Item>
-          </Command.List>
+          {open && (
+            <Command.List className="list">
+              <Command.Item className="item">Apple</Command.Item>
+              <Command.Item className="item">Banana</Command.Item>
+              <Command.Item className="item">Cherry</Command.Item>
+              <Command.Item className="item">Dragonfruit</Command.Item>
+              <Command.Item className="item">Elderberry</Command.Item>
+              <Command.Item className="item">Fig</Command.Item>
+              <Command.Item className="item">Grape</Command.Item>
+              <Command.Item className="item">Honeydew</Command.Item>
+              <Command.Item className="item">Jackfruit</Command.Item>
+              <Command.Item className="item">Kiwi</Command.Item>
+              <Command.Item className="item">Lemon</Command.Item>
+              <Command.Item className="item">Mango</Command.Item>
+              <Command.Item className="item">Nectarine</Command.Item>
+              <Command.Item className="item">Orange</Command.Item>
+              <Command.Item className="item">Papaya</Command.Item>
+              <Command.Item className="item">Quince</Command.Item>
+              <Command.Item className="item">Raspberry</Command.Item>
+              <Command.Item className="item">Strawberry</Command.Item>
+              <Command.Item className="item">Tangerine</Command.Item>
+              <Command.Item className="item">Ugli</Command.Item>
+              <Command.Item className="item">Watermelon</Command.Item>
+              <Command.Item className="item">Xigua</Command.Item>
+              <Command.Item className="item">Yuzu</Command.Item>
+              <Command.Item className="item">Zucchini</Command.Item>
+            </Command.List>
+          )}
         </Portal.Root>
       </Command>
     </div>