Fix selection for controlled combobox

packages/combobox/src/index.tsx

@@ -188,13 +188,15 @@ const reducer: Reducer = (data: StateData, event: MachineEvent) => {
     case SELECT_WITH_CLICK:
       return {
         ...nextState,
-        value: event.value,
+        // if controlled, "set" the input to what it already has, and let the user do whatever they want
+        value: event.isControlled ? data.value : event.value,
         navigationValue: null,
       };
     case SELECT_WITH_KEYBOARD:
       return {
         ...nextState,
-        value: data.navigationValue,
+        // if controlled, "set" the input to what it already has, and let the user do whatever they want
+        value: event.isControlled ? data.value : data.navigationValue,
         navigationValue: null,
       };
     case CLOSE_WITH_BUTTON:
@@ -312,6 +314,8 @@ export const Combobox = React.forwardRef(function Combobox(
   let id = useId(props.id);
   let listboxId = id ? makeId("listbox", id) : "listbox";
 
+  let isControlledRef = React.useRef<boolean>(false);
+
   let context: InternalComboboxContextValue = {
     ariaLabel,
     ariaLabelledby,
@@ -328,6 +332,7 @@ export const Combobox = React.forwardRef(function Combobox(
     popoverRef,
     state,
     transition,
+    isControlledRef,
   };
 
   useCheckStyles("combobox");
@@ -446,6 +451,7 @@ export const ComboboxInput = React.forwardRef(function ComboboxInput(
     ariaLabel,
     ariaLabelledby,
     persistSelectionRef,
+    isControlledRef,
   } = React.useContext(ComboboxContext);
 
   let ref = useComposedRefs(inputRef, forwardedRef);
@@ -460,6 +466,10 @@ export const ComboboxInput = React.forwardRef(function ComboboxInput(
 
   let isControlled = controlledValue != null;
 
+  React.useEffect(() => {
+    isControlledRef.current = isControlled;
+  }, [isControlled]);
+
   // Layout effect should be SSR-safe here because we don't actually do
   // anything with this ref that involves rendering until after we've
   // let the client hydrate in nested components.
@@ -762,6 +772,7 @@ export const ComboboxOption = React.forwardRef(function ComboboxOption(
     onSelect,
     data: { navigationValue },
     transition,
+    isControlledRef,
   } = React.useContext(ComboboxContext);
 
   let ownRef = React.useRef<HTMLElement | null>(null);
@@ -784,7 +795,10 @@ export const ComboboxOption = React.forwardRef(function ComboboxOption(
 
   let handleClick = () => {
     onSelect && onSelect(value);
-    transition(SELECT_WITH_CLICK, { value });
+    transition(SELECT_WITH_CLICK, {
+      value,
+      isControlled: isControlledRef.current,
+    });
   };
 
   return (
@@ -997,6 +1011,7 @@ function useKeyDown() {
     transition,
     autocompletePropRef,
     persistSelectionRef,
+    isControlledRef,
   } = React.useContext(ComboboxContext);
 
   let options = useDescendants(ComboboxDescendantContext);
@@ -1126,7 +1141,9 @@ function useKeyDown() {
           // don't want to submit forms
           event.preventDefault();
           onSelect && onSelect(navigationValue);
-          transition(SELECT_WITH_KEYBOARD);
+          transition(SELECT_WITH_KEYBOARD, {
+            isControlled: isControlledRef.current,
+          });
         }
         break;
     }
@@ -1320,6 +1337,7 @@ interface InternalComboboxContextValue {
   popoverRef: React.MutableRefObject<HTMLElement | undefined>;
   state: State;
   transition: Transition;
+  isControlledRef: React.MutableRefObject<boolean>;
 }
 
 type Transition = (event: MachineEventType, payload?: any) => any;
@@ -1379,9 +1397,11 @@ type MachineEvent =
   | {
       type: "SELECT_WITH_CLICK";
       value: ComboboxValue;
+      isControlled: boolean;
     }
   | {
       type: "SELECT_WITH_KEYBOARD";
+      isControlled: boolean;
     };
 
 type Reducer = (data: StateData, event: MachineEvent) => StateData;