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 ;
+ return (
+
+ );
}
if (!name || isDisabled) return;
@@ -2139,12 +2145,13 @@ export default class Select<
const value = selectValue
.map((opt) => this.getOptionValue(opt))
.join(delimiter);
- return ;
+ return ;
} else {
const input =
selectValue.length > 0 ? (
selectValue.map((opt, i) => (
))
) : (
-
+
);
return
{input}
;
}
} else {
const value = selectValue[0] ? this.getOptionValue(selectValue[0]) : '';
- return ;
+ return ;
}
}
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;
-}> = ({ name, onFocus }) => (
+}> = ({ form, name, onFocus }) => (