From 0e43b00ce644ddf45bad8cc78124c2a20ec7a8d9 Mon Sep 17 00:00:00 2001
From: Alexis Svinartchouk <alexis@spotangels.com>
Date: Thu, 19 Oct 2023 15:00:55 +0400
Subject: [PATCH] Pass form prop to input so it works even if the select is
 ouside the form tag

---
 .changeset/serious-jokes-beam.md                |  5 +++++
 packages/react-select/src/Select.tsx            | 17 ++++++++++++-----
 .../react-select/src/internal/RequiredInput.tsx |  4 +++-
 3 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/serious-jokes-beam.md

diff --git a/.changeset/serious-jokes-beam.md b/.changeset/serious-jokes-beam.md
new file mode 100644
index 0000000000..1847497647
--- /dev/null
+++ b/.changeset/serious-jokes-beam.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Pass the form prop to the created input in renderFormField
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 798f6126b2..b62a9bbffc 100644
--- a/packages/react-select/src/Select.tsx
+++ b/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,12 +2145,13 @@ 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"
@@ -2152,14 +2159,14 @@ export default class Select<
               />
             ))
           ) : (
-            <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
index 834dfca3b3..8b56236157 100644
--- 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"