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

…form tag
JedWatson · Oct 19, 2023 · bcdab79 · bcdab79
1 parent 2f94e8d
commit bcdab79
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
@@ -2019,11 +2019,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;
@@ -2039,21 +2045,22 @@ export default class Select<
           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} />;
     }
   }
 

diff --git a/packages/react-select/src/internal/RequiredInput.tsx b/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"