Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/selectpanel-intermediate-selected-derive.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

SelectPanel: Reset the single-select modal's intermediate selection during render instead of in an effect, avoiding an extra re-render when the panel opens or the selection changes.
25 changes: 20 additions & 5 deletions packages/react/src/SelectPanel/SelectPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -241,11 +241,26 @@ function Panel({
isSingleSelectModal ? selected : undefined,
)

// Reset the intermediate selected item when the panel is open/closed
useEffect(() => {
// eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-derived-state
setIntermediateSelected(isSingleSelectModal ? selected : undefined)
}, [isSingleSelectModal, open, selected])
// Reset the intermediate selected item when the panel is opened/closed or the external
// selection changes. Adjusting state during render (tracking the previous inputs) rather
// than syncing it from an effect avoids an extra post-commit render. The reset is also
// gated on the intermediate selection actually changing, so variants that never use it
// (e.g. multi-select / anchored, where it stays `undefined`) don't pay for a render-phase
// restart on every open/selection change.
const nextIntermediateSelected = isSingleSelectModal ? selected : undefined
const [intermediateSelectedResetKey, setIntermediateSelectedResetKey] = useState({
open,
selected,
isSingleSelectModal,
})
const intermediateSelectedInputsChanged =
intermediateSelectedResetKey.open !== open ||
intermediateSelectedResetKey.selected !== selected ||
intermediateSelectedResetKey.isSingleSelectModal !== isSingleSelectModal
if (intermediateSelectedInputsChanged && intermediateSelected !== nextIntermediateSelected) {
setIntermediateSelectedResetKey({open, selected, isSingleSelectModal})
setIntermediateSelected(nextIntermediateSelected)
}
Comment on lines +244 to +263

const onListContainerRefChanged: FilteredActionListProps['onListContainerRefChanged'] = useCallback(
(node: HTMLElement | null) => {
Expand Down
Loading