[Select] Fix handling dynamic items

atomiks · atomiks · commit 0845efa20342 · 2025-05-07T19:43:51.000+10:00
diff --git a/packages/react/src/menu/popup/MenuPopup.tsx b/packages/react/src/menu/popup/MenuPopup.tsx
@@ -98,6 +98,7 @@ export const MenuPopup = React.forwardRef(function MenuPopup(
       modal={false}
       disabled={!mounted}
       initialFocus={nested ? -1 : 0}
+      restoreFocus
     >
       {renderElement()}
     </FloatingFocusManager>
diff --git a/packages/react/src/select/popup/SelectPopup.tsx b/packages/react/src/select/popup/SelectPopup.tsx
@@ -85,7 +85,12 @@ export const SelectPopup = React.forwardRef(function SelectPopup(
           dangerouslySetInnerHTML={html}
         />
       )}
-      <FloatingFocusManager context={positioner.context} modal={false} disabled={!mounted}>
+      <FloatingFocusManager
+        context={positioner.context}
+        modal={false}
+        disabled={!mounted}
+        restoreFocus
+      >
         {renderElement()}
       </FloatingFocusManager>
     </React.Fragment>
diff --git a/packages/react/src/select/popup/useSelectPopup.ts b/packages/react/src/select/popup/useSelectPopup.ts
@@ -20,15 +20,18 @@ export function useSelectPopup(): useSelectPopup.ReturnValue {
     valueRef,
     selectedItemTextRef,
     popupRef,
-    scrollUpArrowVisible,
-    scrollDownArrowVisible,
-    setScrollUpArrowVisible,
-    setScrollDownArrowVisible,
     keyboardActiveRef,
     floatingRootContext,
   } = useSelectRootContext();
   const { setActiveIndex } = useSelectIndexContext();
-  const { alignItemWithTriggerActive, setControlledItemAnchor } = useSelectPositionerContext();
+  const {
+    alignItemWithTriggerActive,
+    setControlledItemAnchor,
+    scrollUpArrowVisible,
+    scrollDownArrowVisible,
+    setScrollUpArrowVisible,
+    setScrollDownArrowVisible,
+  } = useSelectPositionerContext();
 
   const initialHeightRef = React.useRef(0);
   const reachedMaxHeightRef = React.useRef(false);
diff --git a/packages/react/src/select/positioner/SelectPositioner.tsx b/packages/react/src/select/positioner/SelectPositioner.tsx
@@ -10,6 +10,9 @@ import { SelectPositionerContext } from './SelectPositionerContext';
 import { InternalBackdrop } from '../../utils/InternalBackdrop';
 import { inertValue } from '../../utils/inertValue';
 import { useRenderElement } from '../../utils/useRenderElement';
+import { clearPositionerStyles } from '../popup/utils';
+import { useSelectIndexContext } from '../root/SelectIndexContext';
+import { useEventCallback } from '../../utils/useEventCallback';
 
 /**
  * Positions the select menu popup.
@@ -42,20 +45,24 @@ export const SelectPositioner = React.forwardRef(function SelectPositioner(
   const {
     open,
     mounted,
+    positionerElement,
     setPositionerElement,
     listRef,
     labelsRef,
     floatingRootContext,
     modal,
     touchModality,
-    scrollUpArrowVisible,
-    setScrollUpArrowVisible,
-    scrollDownArrowVisible,
-    setScrollDownArrowVisible,
     alignItemWithTriggerActiveRef,
+    valuesRef,
+    value,
+    setLabel,
   } = useSelectRootContext();
+  const { setSelectedIndex } = useSelectIndexContext();
 
+  const [scrollUpArrowVisible, setScrollUpArrowVisible] = React.useState(false);
+  const [scrollDownArrowVisible, setScrollDownArrowVisible] = React.useState(false);
   const [controlledItemAnchor, setControlledItemAnchor] = React.useState(alignItemWithTrigger);
+
   const alignItemWithTriggerActive = mounted && controlledItemAnchor && !touchModality;
 
   React.useImperativeHandle(alignItemWithTriggerActiveRef, () => alignItemWithTriggerActive);
@@ -114,12 +121,58 @@ export const SelectPositioner = React.forwardRef(function SelectPositioner(
       alignItemWithTriggerActive,
       controlledItemAnchor,
       setControlledItemAnchor,
+      scrollUpArrowVisible,
+      setScrollUpArrowVisible,
+      scrollDownArrowVisible,
+      setScrollDownArrowVisible,
     }),
-    [positioner, alignItemWithTriggerActive, controlledItemAnchor],
+    [
+      positioner,
+      alignItemWithTriggerActive,
+      controlledItemAnchor,
+      scrollUpArrowVisible,
+      scrollDownArrowVisible,
+    ],
   );
 
+  const prevMapSizeRef = React.useRef(0);
+
+  const onMapChange = useEventCallback((map: Map<Element, { index?: number | null } | null>) => {
+    if (map.size === 0 && prevMapSizeRef.current === 0) {
+      return;
+    }
+
+    if (valuesRef.current.length === 0) {
+      return;
+    }
+
+    const prevSize = prevMapSizeRef.current;
+    prevMapSizeRef.current = map.size;
+
+    if (map.size === prevSize) {
+      return;
+    }
+
+    if (value !== null) {
+      const valueIndex = valuesRef.current.indexOf(value);
+      if (valueIndex === -1) {
+        setSelectedIndex(null);
+        setLabel('');
+      }
+    }
+
+    if (open && alignItemWithTriggerActive) {
+      setScrollDownArrowVisible(false);
+      setScrollUpArrowVisible(false);
+
+      if (positionerElement) {
+        clearPositionerStyles(positionerElement, { height: '' });
+      }
+    }
+  });
+
   return (
-    <CompositeList elementsRef={listRef} labelsRef={labelsRef}>
+    <CompositeList elementsRef={listRef} labelsRef={labelsRef} onMapChange={onMapChange}>
       <SelectPositionerContext.Provider value={contextValue}>
         {mounted && modal && <InternalBackdrop inert={inertValue(!open)} />}
         {renderElement()}
diff --git a/packages/react/src/select/positioner/SelectPositionerContext.ts b/packages/react/src/select/positioner/SelectPositionerContext.ts
@@ -5,6 +5,10 @@ export type SelectPositionerContext = useSelectPositioner.ReturnValue & {
   alignItemWithTriggerActive: boolean;
   controlledItemAnchor: boolean;
   setControlledItemAnchor: React.Dispatch<React.SetStateAction<boolean>>;
+  scrollUpArrowVisible: boolean;
+  setScrollUpArrowVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  scrollDownArrowVisible: boolean;
+  setScrollDownArrowVisible: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const SelectPositionerContext = React.createContext<SelectPositionerContext | null>(null);
diff --git a/packages/react/src/select/root/SelectRoot.test.tsx b/packages/react/src/select/root/SelectRoot.test.tsx
@@ -1238,5 +1238,68 @@ describe('<Select.Root />', () => {
 
       expect(screen.queryByRole('option', { name: 'Share' })).toHaveFocus();
     });
+
+    it('unselects the selected item if removed', async () => {
+      function DynamicMenu() {
+        const [items, setItems] = React.useState(['a', 'b', 'c']);
+        const [selectedItem, setSelectedItem] = React.useState('a');
+
+        return (
+          <div>
+            <button
+              onClick={() => {
+                setItems((prev) => prev.filter((item) => item !== 'a'));
+              }}
+            >
+              Remove
+            </button>
+
+            <button
+              onClick={() => {
+                setItems(['a', 'b', 'c']);
+              }}
+            >
+              Add
+            </button>
+            <div data-testid="value">{selectedItem}</div>
+
+            <Select.Root value={selectedItem} onValueChange={setSelectedItem}>
+              <Select.Trigger>Toggle</Select.Trigger>
+              <Select.Portal>
+                <Select.Positioner>
+                  <Select.Popup>
+                    {items.map((item) => (
+                      <Select.Item key={item} value={item}>
+                        {item}
+                      </Select.Item>
+                    ))}
+                  </Select.Popup>
+                </Select.Positioner>
+              </Select.Portal>
+            </Select.Root>
+          </div>
+        );
+      }
+
+      const { user } = await renderFakeTimers(<DynamicMenu />);
+
+      const trigger = screen.getByText('Toggle');
+
+      await act(async () => {
+        trigger.focus();
+      });
+      await user.keyboard('{ArrowDown}');
+
+      expect(screen.queryByRole('option', { name: 'a' })).to.have.attribute('data-selected');
+      expect(screen.getByTestId('value')).to.have.text('a');
+
+      fireEvent.click(screen.getByText('Remove'));
+
+      expect(screen.queryByRole('option', { name: 'b' })).not.to.have.attribute('data-selected');
+
+      fireEvent.click(screen.getByText('Add'));
+
+      expect(screen.queryByRole('option', { name: 'a' })).to.have.attribute('data-selected');
+    });
   });
 });
diff --git a/packages/react/src/select/root/SelectRootContext.ts b/packages/react/src/select/root/SelectRootContext.ts
@@ -25,10 +25,6 @@ export interface SelectRootContext {
   setTriggerElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
   positionerElement: HTMLElement | null;
   setPositionerElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-  scrollUpArrowVisible: boolean;
-  setScrollUpArrowVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  scrollDownArrowVisible: boolean;
-  setScrollDownArrowVisible: React.Dispatch<React.SetStateAction<boolean>>;
   listRef: React.MutableRefObject<Array<HTMLElement | null>>;
   popupRef: React.MutableRefObject<HTMLDivElement | null>;
   getRootTriggerProps: (props?: GenericHTMLProps) => GenericHTMLProps;
diff --git a/packages/react/src/select/root/useSelectRoot.ts b/packages/react/src/select/root/useSelectRoot.ts
@@ -103,8 +103,6 @@ export function useSelectRoot<T>(params: useSelectRoot.Parameters<T>): useSelect
   const [selectedIndex, setSelectedIndex] = React.useState<number | null>(null);
   const [label, setLabel] = React.useState('');
   const [touchModality, setTouchModality] = React.useState(false);
-  const [scrollUpArrowVisible, setScrollUpArrowVisible] = React.useState(false);
-  const [scrollDownArrowVisible, setScrollDownArrowVisible] = React.useState(false);
 
   const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
 
@@ -183,7 +181,7 @@ export function useSelectRoot<T>(params: useSelectRoot.Parameters<T>): useSelect
     clearErrors(name);
 
     const index = valuesRef.current.indexOf(nextValue);
-    setSelectedIndex(index);
+    setSelectedIndex(index === -1 ? null : index);
     setLabel(labelsRef.current[index] ?? '');
   });
 
@@ -194,15 +192,21 @@ export function useSelectRoot<T>(params: useSelectRoot.Parameters<T>): useSelect
       hasRegisteredRef.current = true;
     }
 
-    const stringValue = typeof value === 'string' || value === null ? value : JSON.stringify(value);
-    const index = suppliedIndex ?? valuesRef.current.indexOf(stringValue);
+    const index = suppliedIndex ?? valuesRef.current.indexOf(value);
     const hasIndex = index !== -1;
 
     if (hasIndex || value === null) {
       setSelectedIndex(hasIndex ? index : null);
       setLabel(hasIndex ? (labelsRef.current[index] ?? '') : '');
-    } else if (value) {
-      warn(`The value \`${stringValue}\` is not present in the select items.`);
+      return;
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (value) {
+        const stringValue =
+          typeof value === 'string' || value === null ? value : JSON.stringify(value);
+        warn(`The value \`${stringValue}\` is not present in the select items.`);
+      }
     }
   });
 
@@ -294,10 +298,6 @@ export function useSelectRoot<T>(params: useSelectRoot.Parameters<T>): useSelect
       setTriggerElement,
       positionerElement,
       setPositionerElement,
-      scrollUpArrowVisible,
-      setScrollUpArrowVisible,
-      scrollDownArrowVisible,
-      setScrollDownArrowVisible,
       value,
       setValue,
       open,
@@ -336,8 +336,6 @@ export function useSelectRoot<T>(params: useSelectRoot.Parameters<T>): useSelect
       readOnly,
       triggerElement,
       positionerElement,
-      scrollUpArrowVisible,
-      scrollDownArrowVisible,
       value,
       setValue,
       open,
diff --git a/packages/react/src/select/scroll-arrow/SelectScrollArrow.tsx b/packages/react/src/select/scroll-arrow/SelectScrollArrow.tsx
@@ -18,15 +18,15 @@ export const SelectScrollArrow = React.forwardRef(function SelectScrollArrow(
 ) {
   const { render, className, direction, keepMounted = false, ...elementProps } = componentProps;
 
+  const { popupRef, listRef } = useSelectRootContext();
   const {
-    popupRef,
+    side,
+    alignItemWithTriggerActive,
     scrollUpArrowVisible,
     scrollDownArrowVisible,
     setScrollUpArrowVisible,
     setScrollDownArrowVisible,
-    listRef,
-  } = useSelectRootContext();
-  const { side, alignItemWithTriggerActive } = useSelectPositionerContext();
+  } = useSelectPositionerContext();
   const { setActiveIndex } = useSelectIndexContext();
 
   const visible = direction === 'up' ? scrollUpArrowVisible : scrollDownArrowVisible;

Original file line number	Diff line number	Diff line change
`@@ -98,6 +98,7 @@ export const MenuPopup = React.forwardRef(function MenuPopup(`
`98`	`98`	`modal={false}`
`99`	`99`	`disabled={!mounted}`
`100`	`100`	`initialFocus={nested ? -1 : 0}`
	`101`	`+ restoreFocus`
`101`	`102`	`>`
`102`	`103`	`{renderElement()}`
`103`	`104`	`</FloatingFocusManager>`