experimental/SelectPanel: Only render children when open (#4348)

* only render Overlay when open * Create fair-cooks-return.md * Update fair-cooks-return.md * render dialog but not contents when closed * Update fair-cooks-return.md
primer · Apr 16, 2024 · 885c22c · 885c22c
1 parent 81ac811
commit 885c22c
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 48 deletions.
diff --git a/.changeset/fair-cooks-return.md b/.changeset/fair-cooks-return.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+experimental/SelectPanel: Do not render children of `<dialog>` when closed
diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -254,57 +254,61 @@ const Panel: React.FC<SelectPanelProps> = ({
           if (event.target === event.currentTarget) onClickOutside()
         }}
       >
-        <SelectPanelContext.Provider
-          value={{
-            panelId,
-            title,
-            description,
-            onCancel: onInternalCancel,
-            onClearSelection: propsOnClearSelection ? onInternalClearSelection : undefined,
-            searchQuery,
-            setSearchQuery,
-            selectionVariant,
-            moveFocusToList,
-          }}
-        >
-          <Box
-            as="form"
-            method="dialog"
-            onSubmit={onInternalSubmit}
-            sx={{display: 'flex', flexDirection: 'column', width: '100%'}}
-          >
-            {slots.header ?? /* render default header as fallback */ <SelectPanelHeader />}
-
-            <Box
-              as="div"
-              ref={listContainerRef as React.RefObject<HTMLDivElement>}
-              sx={{
-                flexShrink: 1,
-                flexGrow: 1,
-                overflow: 'hidden',
-
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'space-between',
-                ul: {overflowY: 'auto', flexGrow: 1},
+        {internalOpen && (
+          <>
+            <SelectPanelContext.Provider
+              value={{
+                panelId,
+                title,
+                description,
+                onCancel: onInternalCancel,
+                onClearSelection: propsOnClearSelection ? onInternalClearSelection : undefined,
+                searchQuery,
+                setSearchQuery,
+                selectionVariant,
+                moveFocusToList,
               }}
             >
-              <ActionListContainerContext.Provider
-                value={{
-                  container: 'SelectPanel',
-                  listRole: 'listbox',
-                  selectionAttribute: 'aria-selected',
-                  selectionVariant: selectionVariant === 'instant' ? 'single' : selectionVariant,
-                  afterSelect: internalAfterSelect,
-                  listLabelledBy: `${panelId}--title`,
-                }}
+              <Box
+                as="form"
+                method="dialog"
+                onSubmit={onInternalSubmit}
+                sx={{display: 'flex', flexDirection: 'column', width: '100%'}}
               >
-                {childrenInBody}
-              </ActionListContainerContext.Provider>
-            </Box>
-            {slots.footer}
-          </Box>
-        </SelectPanelContext.Provider>
+                {slots.header ?? /* render default header as fallback */ <SelectPanelHeader />}
+
+                <Box
+                  as="div"
+                  ref={listContainerRef as React.RefObject<HTMLDivElement>}
+                  sx={{
+                    flexShrink: 1,
+                    flexGrow: 1,
+                    overflow: 'hidden',
+
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    ul: {overflowY: 'auto', flexGrow: 1},
+                  }}
+                >
+                  <ActionListContainerContext.Provider
+                    value={{
+                      container: 'SelectPanel',
+                      listRole: 'listbox',
+                      selectionAttribute: 'aria-selected',
+                      selectionVariant: selectionVariant === 'instant' ? 'single' : selectionVariant,
+                      afterSelect: internalAfterSelect,
+                      listLabelledBy: `${panelId}--title`,
+                    }}
+                  >
+                    {childrenInBody}
+                  </ActionListContainerContext.Provider>
+                </Box>
+                {slots.footer}
+              </Box>
+            </SelectPanelContext.Provider>
+          </>
+        )}
       </StyledOverlay>
     </>
   )