diff --git a/.changeset/fair-cooks-return.md b/.changeset/fair-cooks-return.md new file mode 100644 index 000000000000..d6091fbdd55d --- /dev/null +++ b/.changeset/fair-cooks-return.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +experimental/SelectPanel: Do not render children of `` when closed diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx index 7c2a48e0e80b..20b1fc670024 100644 --- a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx +++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx @@ -254,57 +254,61 @@ const Panel: React.FC = ({ if (event.target === event.currentTarget) onClickOutside() }} > - - - {slots.header ?? /* render default header as fallback */ } - - } - sx={{ - flexShrink: 1, - flexGrow: 1, - overflow: 'hidden', - - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-between', - ul: {overflowY: 'auto', flexGrow: 1}, + {internalOpen && ( + <> + - - {childrenInBody} - - - {slots.footer} - - + {slots.header ?? /* render default header as fallback */ } + + } + sx={{ + flexShrink: 1, + flexGrow: 1, + overflow: 'hidden', + + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + ul: {overflowY: 'auto', flexGrow: 1}, + }} + > + + {childrenInBody} + + + {slots.footer} + + + + )} )