diff --git a/.changeset/funny-areas-doubt.md b/.changeset/funny-areas-doubt.md new file mode 100644 index 00000000000..63a6cd2c1ac --- /dev/null +++ b/.changeset/funny-areas-doubt.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Remove render phase setStates on SelectPanel diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 44cc87cfd78..e015be1a6d7 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -215,8 +215,6 @@ function Panel({ const [needsNoItemsAnnouncement, setNeedsNoItemsAnnouncement] = useState(false) const isNarrowScreenSize = useResponsiveValue({narrow: true, regular: false, wide: false}, false) const [selectedOnSort, setSelectedOnSort] = useState([]) - const [prevItems, setPrevItems] = useState([]) - const [prevOpen, setPrevOpen] = useState(open) const initialHeightRef = useRef(0) const initialScaleRef = useRef(1) const noticeRef = useRef(null) @@ -679,17 +677,25 @@ function Panel({ selectedOnSort, ]) - if (prevItems !== items) { - setPrevItems(items) - if (prevItems.length === 0 && items.length > 0) { - resetSort() + // Track previous items and reset sort when items first load + const prevItemsRef = useRef(items) + useEffect(() => { + if (prevItemsRef.current !== items) { + if (prevItemsRef.current.length === 0 && items.length > 0) { + resetSort() + } + prevItemsRef.current = items } - } + }, [items, resetSort]) - if (open !== prevOpen) { - setPrevOpen(open) - resetSort() - } + // Reset sort when panel opens + const prevOpenRef = useRef(open) + useEffect(() => { + if (prevOpenRef.current !== open) { + resetSort() + prevOpenRef.current = open + } + }, [open, resetSort]) const focusTrapSettings = { initialFocusRef: inputRef || undefined,