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 }) => (