How do you use the required attribute in the Select component?

[takurinton]

I want <Select /> to be mandatory, but I don't know how.

If I specify props required, the following error will be output.

Type '{ placeholder: string; noOptionsMessage: () => string; onChange: (option: any) => any; required: boolean; value: any; options: { value: string; label: string; }[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Pick<Props<any, false, GroupBase<any>>, "form" | "theme" | "name" | "className" | "id" | "aria-errormessage" | ... 24 more ... | "onMenuScrollToBottom"> & Partial<...> & Partial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'.
  Property 'required' does not exist on type 'IntrinsicAttributes & Omit<Pick<Props<any, false, GroupBase<any>>, "form" | "theme" | "name" | "className" | "id" | "aria-errormessage" | ... 24 more ... | "onMenuScrollToBottom"> & Partial<...> & Partial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'.ts(2322)

<Select
  placeholder=""
  noOptionsMessage={() => "no results"}
  onChange={(option) => handleChange(option)}
  required={true} // I have error here
  value={managementAccount}
  options={actAccountOptions}
/>

[ebonow]

@takurinton

First, if you are getting type errors, please do not point to the src directory in your import.

Next, required is not a valid Select prop but can be passed in as a custom select prop to be used by custom components. You may create a custom Input component and pass in the required attribute to it such as this...

const Input = props => <components.Input {...props} required={props.selectProps.required} />

const RequiredSelect = props => <Select required={true} components={{ Input }} {...props} />

BUT you will run into an issue of it always failing as the default behavior of the select is to clear the input when selecting an option or blurring the input. This can be remedied by overriding the default behavior of the input by overriding the default onInputChange method.

An example on how to do this can be found here: https://codesandbox.io/s/react-select-editable-and-selectable-6nfdv?file=/src/App.js:286-1013 Also, note that the commented section in the onInputChange can be used to reset the inputValue to the last selected option label if that is your preference.

For further discussion on input validation you can refer to this issue: #4327

[takurinton]

thank you!
I'll try!
If that doesn't work, I'll post more to this discussion. 🙇‍♂️

[takurinton]

Sorry...
Did not indicate version. I'm using react-select v5.1.0.