From 505c800f1e24b0d970f6479dd0c904197feeb7ad Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Fri, 22 Nov 2024 14:27:56 +0100
Subject: [PATCH] Do not render Popover children while closed

---
 src/components/feedback/Popover.tsx          |  2 +-
 src/components/feedback/test/Popover-test.js | 23 ++++++++++----------
 src/components/input/Select.tsx              |  3 +--
 src/components/input/test/Select-test.js     |  2 +-
 4 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/feedback/Popover.tsx b/src/components/feedback/Popover.tsx
index 0200b0a7..f5eb66b2 100644
--- a/src/components/feedback/Popover.tsx
+++ b/src/components/feedback/Popover.tsx
@@ -254,7 +254,7 @@ export default function Popover({
       data-testid="popover"
       data-component="Popover"
     >
-      {children}
+      {open && children}
     </div>
   );
 }
diff --git a/src/components/feedback/test/Popover-test.js b/src/components/feedback/test/Popover-test.js
index e0052cc9..d4eb8be5 100644
--- a/src/components/feedback/test/Popover-test.js
+++ b/src/components/feedback/test/Popover-test.js
@@ -18,18 +18,17 @@ function FakeComponent({ children, ...rest }) {
         Anchor element
       </button>
       <Popover open={open} anchorElementRef={buttonRef} {...rest}>
-        {open &&
-          (children ?? (
-            <>
-              Content of popover
-              <button
-                data-testid="inner-button"
-                onClick={() => setOpen(prev => !prev)}
-              >
-                Focusable element inside popover
-              </button>
-            </>
-          ))}
+        {children ?? (
+          <>
+            Content of popover
+            <button
+              data-testid="inner-button"
+              onClick={() => setOpen(prev => !prev)}
+            >
+              Focusable element inside popover
+            </button>
+          </>
+        )}
       </Popover>
     </div>
   );
diff --git a/src/components/input/Select.tsx b/src/components/input/Select.tsx
index 526d701f..7d9021e1 100644
--- a/src/components/input/Select.tsx
+++ b/src/components/input/Select.tsx
@@ -468,10 +468,9 @@ function SelectMain<T>({
             aria-multiselectable={multiple}
             aria-labelledby={buttonId ?? defaultButtonId}
             aria-orientation="vertical"
-            data-listbox-open={listboxOpen}
             onScroll={onListboxScroll}
           >
-            {listboxOpen && children}
+            {children}
           </ul>
         </Popover>
       </SelectContext.Provider>
diff --git a/src/components/input/test/Select-test.js b/src/components/input/test/Select-test.js
index 20782770..40cad6f4 100644
--- a/src/components/input/test/Select-test.js
+++ b/src/components/input/test/Select-test.js
@@ -79,7 +79,7 @@ describe('Select', () => {
   const toggleListbox = wrapper => getToggleButton(wrapper).simulate('click');
 
   const isListboxClosed = wrapper =>
-    wrapper.find('[role="listbox"]').prop('data-listbox-open') === false;
+    wrapper.find('Popover').prop('open') === false;
 
   const openListbox = wrapper => {
     if (isListboxClosed(wrapper)) {