[combobox] Fix popup input form submit (#4687)

Author: atomiks

packages/react/src/combobox/input/ComboboxInput.tsx

@@ -14,7 +14,11 @@ import {
 import { triggerStateAttributesMapping } from '../utils/stateAttributesMapping';
 import { selectors } from '../store';
 import type { FieldRootState } from '../../field/root/FieldRoot';
-import { useFieldRootContext } from '../../internals/field-root-context/FieldRootContext';
+import {
+  DEFAULT_FIELD_ROOT_CONTEXT,
+  FieldRootContext,
+  useFieldRootContext,
+} from '../../internals/field-root-context/FieldRootContext';
 import { DEFAULT_FIELD_STATE_ATTRIBUTES } from '../../internals/field-constants/constants';
 import { useLabelableContext } from '../../internals/labelable-provider/LabelableContext';
 import { useComboboxChipsContext } from '../chips/ComboboxChipsContext';
@@ -484,12 +488,20 @@ export const ComboboxInput = React.forwardRef(function ComboboxInput(
     stateAttributesMapping: triggerStateAttributesMapping,
   });
 
+  const renderedInput = hasPositionerParent ? (
+    <FieldRootContext.Provider value={DEFAULT_FIELD_ROOT_CONTEXT}>
+      {element}
+    </FieldRootContext.Provider>
+  ) : (
+    element
+  );
+
   return (
     <React.Fragment>
       {open && focusManagerModal && (
         <ComboboxInternalDismissButton ref={store.state.startDismissRef} />
       )}
-      {element}
+      {renderedInput}
     </React.Fragment>
   );
 });

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

@@ -14,6 +14,7 @@ import { Combobox } from '@base-ui/react/combobox';
 import { Dialog } from '@base-ui/react/dialog';
 import { Field } from '@base-ui/react/field';
 import { Form } from '@base-ui/react/form';
+import { Input } from '@base-ui/react/input';
 import { useStore } from '@base-ui/utils/store';
 import { CompositeRoot } from '../../internals/composite/root/CompositeRoot';
 import { CompositeItem } from '../../internals/composite/item/CompositeItem';
@@ -4971,7 +4972,7 @@ describe('<Combobox.Root />', () => {
               <Combobox.Portal>
                 <Combobox.Positioner>
                   <Combobox.Popup>
-                    <Combobox.Input data-testid="input" />
+                    <Combobox.Input render={<Input data-testid="input" />} />
                     <Combobox.List>
                       <Combobox.Item value="a">a</Combobox.Item>
                       <Combobox.Item value="b">b</Combobox.Item>
@@ -5008,6 +5009,90 @@ describe('<Combobox.Root />', () => {
       expect(input).not.toHaveAttribute('data-invalid');
     });
 
+    it('submits when input renders a field-aware input', async () => {
+      const handleFormSubmit = vi.fn();
+
+      const { user } = await render(
+        <Form onFormSubmit={handleFormSubmit}>
+          <Field.Root name="country">
+            <Combobox.Root items={['France', 'Germany']} required>
+              <Combobox.Input render={<Input data-testid="input" />} />
+              <Combobox.Portal>
+                <Combobox.Positioner>
+                  <Combobox.Popup>
+                    <Combobox.List>
+                      {(item: string) => (
+                        <Combobox.Item key={item} value={item}>
+                          {item}
+                        </Combobox.Item>
+                      )}
+                    </Combobox.List>
+                  </Combobox.Popup>
+                </Combobox.Positioner>
+              </Combobox.Portal>
+            </Combobox.Root>
+          </Field.Root>
+          <button type="submit">Submit</button>
+        </Form>,
+      );
+
+      const input = screen.getByTestId('input');
+      expect(input).toHaveAttribute('name', 'country');
+
+      await user.click(input);
+      await user.click(screen.getByRole('option', { name: 'France' }));
+      await user.click(screen.getByText('Submit'));
+
+      expect(handleFormSubmit.mock.calls.length).toBe(1);
+      expect(handleFormSubmit.mock.calls[0][0]).toEqual({ country: 'France' });
+    });
+
+    it('submits when input inside popup renders a field-aware input', async () => {
+      const handleFormSubmit = vi.fn();
+
+      const { user } = await render(
+        <Form onFormSubmit={handleFormSubmit}>
+          <Field.Root name="country">
+            <Combobox.Root items={['France', 'Germany']} required>
+              <Combobox.Trigger>
+                <Combobox.Value />
+              </Combobox.Trigger>
+              <Combobox.Portal>
+                <Combobox.Positioner>
+                  <Combobox.Popup>
+                    <Combobox.Input render={<Input data-testid="input" />} />
+                    <Combobox.List>
+                      {(item: string) => (
+                        <Combobox.Item key={item} value={item}>
+                          {item}
+                        </Combobox.Item>
+                      )}
+                    </Combobox.List>
+                  </Combobox.Popup>
+                </Combobox.Positioner>
+              </Combobox.Portal>
+            </Combobox.Root>
+          </Field.Root>
+          <button type="submit">Submit</button>
+        </Form>,
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      const input = await screen.findByTestId('input');
+      expect(input).not.toHaveAttribute('name');
+
+      await user.click(screen.getByRole('option', { name: 'France' }));
+
+      const hiddenInput = screen.getByRole('textbox', { hidden: true });
+      expect(hiddenInput).toHaveAttribute('name', 'country');
+      expect(hiddenInput).toHaveValue('France');
+
+      await user.click(screen.getByText('Submit'));
+
+      expect(handleFormSubmit.mock.calls.length).toBe(1);
+      expect(handleFormSubmit.mock.calls[0][0]).toEqual({ country: 'France' });
+    });
+
     it('clears external errors on change', async () => {
       const { user } = await renderFakeTimers(
         <Form

packages/react/src/internals/field-root-context/FieldRootContext.ts

@@ -43,7 +43,7 @@ export interface FieldRootContext {
   validation: UseFieldValidationReturnValue;
 }
 
-export const FieldRootContext = React.createContext<FieldRootContext>({
+export const DEFAULT_FIELD_ROOT_CONTEXT: FieldRootContext = {
   invalid: undefined,
   name: undefined,
   validityData: {
@@ -76,7 +76,9 @@ export const FieldRootContext = React.createContext<FieldRootContext>({
     inputRef: { current: null },
     commit: async () => {},
   },
-});
+};
+
+export const FieldRootContext = React.createContext<FieldRootContext>(DEFAULT_FIELD_ROOT_CONTEXT);
 
 export function useFieldRootContext(optional = true) {
   const context = React.useContext(FieldRootContext);