Skip to content

Commit a177408

Browse files
committed
Pass form prop to input so it works even if the select is ouside the form tag
1 parent 06e3488 commit a177408

File tree

3 files changed

+19
-5
lines changed

3 files changed

+19
-5
lines changed

.changeset/serious-jokes-beam.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'react-select': patch
3+
---
4+
5+
Pass the form prop to the created input in renderFormField

packages/react-select/src/Select.tsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -2125,11 +2125,17 @@ export default class Select<
21252125
);
21262126
}
21272127
renderFormField() {
2128-
const { delimiter, isDisabled, isMulti, name, required } = this.props;
2128+
const { delimiter, form, isDisabled, isMulti, name, required } = this.props;
21292129
const { selectValue } = this.state;
21302130

21312131
if (required && !this.hasValue() && !isDisabled) {
2132-
return <RequiredInput name={name} onFocus={this.onValueInputFocus} />;
2132+
return (
2133+
<RequiredInput
2134+
form={form}
2135+
name={name}
2136+
onFocus={this.onValueInputFocus}
2137+
/>
2138+
);
21332139
}
21342140

21352141
if (!name || isDisabled) return;
@@ -2145,21 +2151,22 @@ export default class Select<
21452151
selectValue.length > 0 ? (
21462152
selectValue.map((opt, i) => (
21472153
<input
2154+
form={form}
21482155
key={`i-${i}`}
21492156
name={name}
21502157
type="hidden"
21512158
value={this.getOptionValue(opt)}
21522159
/>
21532160
))
21542161
) : (
2155-
<input name={name} type="hidden" value="" />
2162+
<input form={form} name={name} type="hidden" value="" />
21562163
);
21572164

21582165
return <div>{input}</div>;
21592166
}
21602167
} else {
21612168
const value = selectValue[0] ? this.getOptionValue(selectValue[0]) : '';
2162-
return <input name={name} type="hidden" value={value} />;
2169+
return <input form={form} name={name} type="hidden" value={value} />;
21632170
}
21642171
}
21652172

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { FocusEventHandler, FunctionComponent } from 'react';
33
import { jsx } from '@emotion/react';
44

55
const RequiredInput: FunctionComponent<{
6+
readonly form?: string;
67
readonly name?: string;
78
readonly onFocus: FocusEventHandler<HTMLInputElement>;
8-
}> = ({ name, onFocus }) => (
9+
}> = ({ form, name, onFocus }) => (
910
<input
1011
required
12+
form={form}
1113
name={name}
1214
tabIndex={-1}
1315
aria-hidden="true"

0 commit comments

Comments
 (0)