SelectPanel: Fix items not being selected when defined within scope

.changeset/stupid-monkeys-beg.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SelectPanel: Fix items not being selected when defined within scope (track selection by item.id)

packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx

@@ -309,3 +309,39 @@ export const CustomItemRenderer = () => {
     </>
   )
 }
+
+export const ItemsInScope = () => {
+  // items are defined in the same scope as selection, so they could rerender and create new object references
+  // We use item.id to track selection
+  // Reported in: https://github.com/primer/react/issues/4315
+  const items = [
+    {text: 'enhancement', id: 1},
+    {text: 'bug', id: 2},
+    {text: 'good first issue', id: 3},
+    {text: 'design', id: 4},
+    {text: 'blocker', id: 5},
+    {text: 'backend', id: 6},
+    {text: 'frontend', id: 7},
+  ]
+
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [open, setOpen] = useState(false)
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+
+  return (
+    <>
+      <h1>Items in component scope</h1>
+      <SelectPanel
+        title="Select labels"
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+      />
+    </>
+  )
+}

packages/react/src/SelectPanel/SelectPanel.test.tsx

@@ -335,6 +335,53 @@ for (const useModernActionList of [false, true]) {
             screen.getByRole('option', {name: 'item one'}).id,
           )
         })
+
+        it('should select an item (by item.id) even when items are defined in the component', async () => {
+          const user = userEvent.setup()
+
+          function Fixture() {
+            // items are defined in the same scope as selection, so they could rerender and create new object references
+            // We use item.id to track selection
+            const items: SelectPanelProps['items'] = [
+              {id: 'one', text: 'item one'},
+              {id: 'two', text: 'item two'},
+              {id: 'three', text: 'item three'},
+            ]
+
+            const [open, setOpen] = React.useState(false)
+            const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
+            const [filter, setFilter] = React.useState('')
+
+            return (
+              <ThemeProvider>
+                <SelectPanel
+                  title="test title"
+                  items={items}
+                  placeholder="Select items"
+                  selected={selected}
+                  onSelectedChange={setSelected}
+                  filterValue={filter}
+                  onFilterChange={setFilter}
+                  open={open}
+                  onOpenChange={setOpen}
+                />
+              </ThemeProvider>
+            )
+          }
+
+          renderWithFlag(<Fixture />, useModernActionList)
+
+          await user.click(screen.getByText('Select items'))
+
+          await user.click(screen.getByText('item one'))
+          expect(screen.getByRole('option', {name: 'item one'})).toHaveAttribute('aria-selected', 'true')
+
+          await user.click(screen.getByText('item two'))
+          expect(screen.getByRole('option', {name: 'item two'})).toHaveAttribute('aria-selected', 'true')
+
+          await user.click(screen.getByRole('option', {name: 'item one'}))
+          expect(screen.getByRole('option', {name: 'item one'})).toHaveAttribute('aria-selected', 'false')
+        })
       })
 
       function FilterableSelectPanel() {

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -61,6 +61,16 @@ const focusZoneSettings: Partial<FocusZoneHookSettings> = {
   disabled: true,
 }
 
+const areItemsEqual = (itemA: ItemInput, itemB: ItemInput) => {
+  // prefer checking equivality by item.id
+  if (typeof itemA.id !== 'undefined') return itemA.id === itemB.id
+  else return itemA === itemB
+}
+
+const doesItemsIncludeItem = (items: ItemInput[], item: ItemInput) => {
+  return items.some(i => areItemsEqual(i, item))
+}
+
 export function SelectPanel({
   open,
   onOpenChange,
@@ -129,7 +139,7 @@ export function SelectPanel({
 
   const itemsToRender = useMemo(() => {
     return items.map(item => {
-      const isItemSelected = isMultiSelectVariant(selected) ? selected.includes(item) : selected === item
+      const isItemSelected = isMultiSelectVariant(selected) ? doesItemsIncludeItem(selected, item) : selected === item
 
       return {
         ...item,
@@ -143,8 +153,10 @@ export function SelectPanel({
           }
 
           if (isMultiSelectVariant(selected)) {
-            const otherSelectedItems = selected.filter(selectedItem => selectedItem !== item)
-            const newSelectedItems = selected.includes(item) ? otherSelectedItems : [...otherSelectedItems, item]
+            const otherSelectedItems = selected.filter(selectedItem => !areItemsEqual(selectedItem, item))
+            const newSelectedItems = doesItemsIncludeItem(selected, item)
+              ? otherSelectedItems
+              : [...otherSelectedItems, item]
 
             const multiSelectOnChange = onSelectedChange as SelectPanelMultiSelection['onSelectedChange']
             multiSelectOnChange(newSelectedItems)