From b3827c8ec343eb6310840a71d47a7ba8aaaa8333 Mon Sep 17 00:00:00 2001
From: XiaoYan Li <lxy.lixiaoyan@gmail.com>
Date: Thu, 29 Jan 2026 21:07:25 +0800
Subject: [PATCH] fix(RAC): move native input inside the combobox div

We have some form binding logic that depends on native form elements being inside the ref element. The current implementation of ComboBox breaks this design. This also makes it more difficult to access the native element for certain reasons (unless we add an extra div wrapper outside). I suggest changing the rendering structure of ComboBox to be consistent with Select, rendering the native form element inside the div instead of as a sibling.
---
 packages/react-aria-components/src/ComboBox.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-aria-components/src/ComboBox.tsx b/packages/react-aria-components/src/ComboBox.tsx
index 42343816a6d..af3d210cb56 100644
--- a/packages/react-aria-components/src/ComboBox.tsx
+++ b/packages/react-aria-components/src/ComboBox.tsx
@@ -243,8 +243,10 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
         data-open={state.isOpen || undefined}
         data-disabled={props.isDisabled || undefined}
         data-invalid={validation.isInvalid || undefined}
-        data-required={props.isRequired || undefined} />
-      {name && formValue === 'key' && <input type="hidden" name={name} form={props.form} value={state.selectedKey ?? ''} />}
+        data-required={props.isRequired || undefined}>
+        {renderProps.children}
+        {name && formValue === 'key' && <input type="hidden" name={name} form={props.form} value={state.selectedKey ?? ''} />}
+      </dom.div>
     </Provider>
   );
 }