Do not render Popover children while closed

hypothesis · Nov 22, 2024 · 505c800 · 505c800
1 parent 3021966
commit 505c800
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)) {