diff --git a/.changeset/sixty-forks-fry.md b/.changeset/sixty-forks-fry.md new file mode 100644 index 0000000000..ff60f26ea5 --- /dev/null +++ b/.changeset/sixty-forks-fry.md @@ -0,0 +1,5 @@ +--- +"react-select": patch +--- + +Fix react-select ignoring HTML5 "form" attribute diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index c8d59039d0..da5cdec020 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -243,6 +243,8 @@ export type Props = { tabSelectsValue: boolean, /* The value of the select; reflected by the selected option */ value: ValueType, + /* Sets the form attribute on the input */ + form?: string, }; export const defaultProps = { @@ -1397,6 +1399,7 @@ export default class Select extends Component { inputId, inputValue, tabIndex, + form, } = this.props; const { Input } = this.components; const { inputIsHidden } = this.state; @@ -1422,6 +1425,7 @@ export default class Select extends Component { readOnly disabled={isDisabled} tabIndex={tabIndex} + form={form} value="" {...ariaAttributes} /> @@ -1447,6 +1451,7 @@ export default class Select extends Component { selectProps={selectProps} spellCheck="false" tabIndex={tabIndex} + form={form} theme={theme} type="text" value={inputValue} diff --git a/packages/react-select/src/components/Input.js b/packages/react-select/src/components/Input.js index 3ef4013852..34564a70a1 100644 --- a/packages/react-select/src/components/Input.js +++ b/packages/react-select/src/components/Input.js @@ -15,6 +15,8 @@ export type InputProps = PropsWithStyles & { /** Whether the input is disabled */ isDisabled?: boolean, className?: string, + /** The ID of the form that the input belongs to */ + form?: string, }; export const inputCSS = ({