[combobox] Infer labels only for primitive projected values

Author: atomiks

docs/src/app/(docs)/react/components/combobox/page.mdx

@@ -85,6 +85,8 @@ To select a primitive field such as an ID, `itemToValue` is required:
 
 Render functions still receive full objects, while selection state and callbacks use the primitive key. When rendering items from `<Combobox.List>` or `<Combobox.Collection>`, omit `<Combobox.Item value>`. For manually rendered virtualized items, provide `index`.
 
+Labels are inferred automatically for primitive keys. If `itemToValue` returns an object, provide `itemToStringLabel` to display its label in the input.
+
 ## Examples
 
 ### Typed wrapper component

packages/react/src/combobox/root/AriaCombobox.tsx

@@ -276,10 +276,9 @@ export function AriaCombobox<Value = any, Mode extends SelectionMode = 'none'>(
             value,
             labelItems as Parameters<typeof resolveLabelString>[1],
             itemToStringLabel,
-            isItemEqualToValue,
           )
         : stringifyAsLabel(value, itemToStringLabel),
-    [getItemValue, labelItems, itemToStringLabel, isItemEqualToValue],
+    [getItemValue, labelItems, itemToStringLabel],
   );
 
   // If neither inputValue nor defaultInputValue are provided, derive it from the

packages/react/src/combobox/root/ComboboxRoot.test.tsx

@@ -3718,13 +3718,17 @@ describe('<Combobox.Root />', () => {
           { value: { code: 'us' }, label: 'United States' },
           { value: { code: 'ca' }, label: 'Canada' },
         ];
+        const labels: Record<string, string> = { us: 'United States', ca: 'Canada' };
 
         const { user } = await render(
           <Combobox.Root
             items={items}
             itemToValue={(item) => item.value}
             defaultValue={{ code: 'ca' }}
             isItemEqualToValue={(a: { code: string }, b: { code: string }) => a.code === b.code}
+            // Object projections resolve their text through `itemToStringLabel`; automatic
+            // label inference only matches primitive projected values.
+            itemToStringLabel={(value: { code: string }) => labels[value.code]}
           >
             <Combobox.Input data-testid="input" />
             <span data-testid="value">

packages/react/src/combobox/value/ComboboxValue.tsx

@@ -17,11 +17,6 @@ export function ComboboxValue(props: ComboboxValue.Props): React.ReactElement {
   const store = useComboboxRootContext();
 
   const itemToStringLabel = useStore(store, selectors.itemToStringLabel);
-  const hasItemToValue = useStore(store, selectors.hasItemToValue);
-  const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
-  // With `itemToValue`, the store `items` hold projected values, which may be objects that
-  // need the custom comparer to match. Without it, the resolvers' own matching is correct.
-  const equality = hasItemToValue ? isItemEqualToValue : undefined;
   const selectedValue = useStore(store, selectors.selectedValue);
   const items = useStore(store, selectors.items);
   const multiple = useStore(store, selectors.selectionMode) === 'multiple';
@@ -38,9 +33,9 @@ export function ComboboxValue(props: ComboboxValue.Props): React.ReactElement {
   } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
     children = placeholder;
   } else if (multiple && Array.isArray(selectedValue)) {
-    children = resolveMultipleLabels(selectedValue, items, itemToStringLabel, equality);
+    children = resolveMultipleLabels(selectedValue, items, itemToStringLabel);
   } else {
-    children = resolveSelectedLabel(selectedValue, items, itemToStringLabel, equality);
+    children = resolveSelectedLabel(selectedValue, items, itemToStringLabel);
   }
 
   return <React.Fragment>{children}</React.Fragment>;

packages/react/src/internals/resolveValueLabel.tsx

@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
 import { serializeValue } from './serializeValue';
-import { compareItemEquality, type ItemEqualityComparer } from './itemEquality';
 
 type ItemRecord = Record<string, React.ReactNode>;
 type ItemsInput = ItemRecord | ReadonlyArray<LabeledItem> | ReadonlyArray<Group<any>> | undefined;
@@ -91,7 +90,6 @@ export function resolveSelectedLabel(
   value: any,
   items: ItemsInput,
   itemToStringLabel?: (item: any) => string,
-  isItemEqualToValue?: ItemEqualityComparer,
 ): React.ReactNode {
   function fallback() {
     return stringifyAsLabel(value, itemToStringLabel);
@@ -118,15 +116,6 @@ export function resolveSelectedLabel(
       ? arrayItems.flatMap((group) => group.items)
       : arrayItems;
 
-    if (isItemEqualToValue) {
-      const match = flatItems.find(
-        (item) => item && compareItemEquality(item.value, value, isItemEqualToValue),
-      );
-      if (match && match.label != null) {
-        return match.label;
-      }
-    }
-
     if (value == null || typeof value !== 'object') {
       const match = flatItems.find((item) => item.value === value);
       if (match && match.label != null) {
@@ -156,9 +145,8 @@ export function resolveLabelString(
   value: any,
   items: ItemsInput,
   itemToStringLabel?: (item: any) => string,
-  isItemEqualToValue?: ItemEqualityComparer,
 ): string {
-  const label = resolveSelectedLabel(value, items, itemToStringLabel, isItemEqualToValue);
+  const label = resolveSelectedLabel(value, items, itemToStringLabel);
 
   if (typeof label === 'string' || typeof label === 'number') {
     return String(label);
@@ -173,15 +161,14 @@ export function resolveMultipleLabels(
   values: any[],
   items: ItemsInput,
   itemToStringLabel?: (item: any) => string,
-  isItemEqualToValue?: ItemEqualityComparer,
 ): React.ReactNode {
   return values.reduce((acc, value, index) => {
     if (index > 0) {
       acc.push(', ');
     }
     acc.push(
       <React.Fragment key={index}>
-        {resolveSelectedLabel(value, items, itemToStringLabel, isItemEqualToValue)}
+        {resolveSelectedLabel(value, items, itemToStringLabel)}
       </React.Fragment>,
     );
     return acc;