Pass form prop to input so it works even if the select is ouside the form tag

Author: zvin

.changeset/serious-jokes-beam.md

@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Pass the form prop to the created input in renderFormField

packages/react-select/src/Select.tsx

@@ -2125,11 +2125,17 @@ export default class Select<
     );
   }
   renderFormField() {
-    const { delimiter, isDisabled, isMulti, name, required } = this.props;
+    const { delimiter, form, isDisabled, isMulti, name, required } = this.props;
     const { selectValue } = this.state;
 
     if (required && !this.hasValue() && !isDisabled) {
-      return <RequiredInput name={name} onFocus={this.onValueInputFocus} />;
+      return (
+        <RequiredInput
+          form={form}
+          name={name}
+          onFocus={this.onValueInputFocus}
+        />
+      );
     }
 
     if (!name || isDisabled) return;
@@ -2139,27 +2145,28 @@ export default class Select<
         const value = selectValue
           .map((opt) => this.getOptionValue(opt))
           .join(delimiter);
-        return <input name={name} type="hidden" value={value} />;
+        return <input form={form} name={name} type="hidden" value={value} />;
       } else {
         const input =
           selectValue.length > 0 ? (
             selectValue.map((opt, i) => (
               <input
+                form={form}
                 key={`i-${i}`}
                 name={name}
                 type="hidden"
                 value={this.getOptionValue(opt)}
               />
             ))
           ) : (
-            <input name={name} type="hidden" value="" />
+            <input form={form} name={name} type="hidden" value="" />
           );
 
         return <div>{input}</div>;
       }
     } else {
       const value = selectValue[0] ? this.getOptionValue(selectValue[0]) : '';
-      return <input name={name} type="hidden" value={value} />;
+      return <input form={form} name={name} type="hidden" value={value} />;
     }
   }
 

packages/react-select/src/internal/RequiredInput.tsx

@@ -3,11 +3,13 @@ import { FocusEventHandler, FunctionComponent } from 'react';
 import { jsx } from '@emotion/react';
 
 const RequiredInput: FunctionComponent<{
+  readonly form?: string;
   readonly name?: string;
   readonly onFocus: FocusEventHandler<HTMLInputElement>;
-}> = ({ name, onFocus }) => (
+}> = ({ form, name, onFocus }) => (
   <input
     required
+    form={form}
     name={name}
     tabIndex={-1}
     aria-hidden="true"