How can I get react-select to integrate properly with react-final-form - react-select

Question

I'm using react-final-form to send along some basic user data. First name, last name, email and a dropdown value with a reason why they're contacting me. I tried the following (the custom input section on react-final-form's docs):
<Field name="myField">
{props => (
<div>
<Select
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
onChange={props.input.onChange}
/>
</div>
)}
</Field>
My guess is maybe there's some collision with the onChange prop? Not sure, but the information in the dropdown is not being picked up by react-final-form and pass along to the <form> on submit.

Answer 1

There is an example on how to use react-select with react-final-form: https://codesandbox.io/s/40mr0v2r87.
You should add an adapter:
const ReactSelectAdapter = ({ input, ...rest }) => (
<Select {...input} {...rest} />
)
And then you can use it as a component:
<Field
name="state"
component={ReactSelectAdapter}
options={states}
/>

Answer 2

Here my approach. I decided problem with initial values and value which will sent to server. Just like:
{selectFieldId: "value"}
import React from "react";
import { FieldRenderProps } from "react-final-form";
import Select, { ValueType } from "react-select";
type Option = {
label: string;
value: string;
};
export const CustomSelect = ({ input, options, ...rest }: FieldRenderProps<string, HTMLElement>) => {
const handleChange = (option: ValueType<Option, false>) => {
input.onChange(option?.value);
};
return (
<Select
{...input}
{...rest}
onChange={handleChange}
options={options}
value={options ? options.find((option: Option) => option.value === input.value) : ""}
/>
);
};
export default CustomSelect;

Answer 3

in a simple way I have done it like this:
const locationOptions = [
{ value: 1, label: "ADEN" },
{ value: 2, label: "MUKALLA" },
{ value: 3, label: "TAIZ" },
];
<Field name="location_id">
{({ input }) => (
<Select
options={locationOptions}
placeholder="Select Location"
{...input}
/>
)}
</Field>
the on submit method:
const onSubmit = (data) => {
console.log(data);
};