react-hook-form with react-select how to save values as an array of values instead of array of option objects

I'm using chakra-react-select which is basically just a styled Chakra compatible version of react-select.

I'm also using react-hook-form, I've hooked up the component to work nicely with react form by writing the following bit of code:

<Controller
  control={control}
  name={name}
  rules={validation}
  render={({ field }) => {
    const Component = isCreatable ? CreatableSelect : Select;

    return (
      <Component
        isRequired={Boolean(validation?.required)}
        isClearable={isClearable}
        isDisabled={isDisabled}
        isLoading={isLoading}
        isMulti={isMulti}
        isSearchable={isSearchable}
        options={options}
        {...field}
      />
    );
  }}
/>

This works but my only problem is the value that gets saved to the form is not an array of values (which is what I expect). Instead I get an array of selected options (i.e. the entire option object).

I expect: ['value1', 'value2', ...]

Instead I get [{ label: 'Value 1', value: 'value1' }, ...]

What is the neatest way to change they way the data is saved on my form? I can't do it on the submit because my yup validations apply the validation rules before the form submit event finished.

The solution to this is to overwrite the onChange and value keys from field like this:

<Controller
control={control}
name={name}
rules={validation}
render={({ field: { onChange, value, ...field } }) => {
const Component = isCreatable ? CreatableSelect : Select;
function handleChange(newValue) {
onChange(getChangedValue(newValue);
}
const internalValue = getInitialValue(value)
return (
<Component
isRequired={Boolean(validation?.required)}
isClearable={isClearable}
isDisabled={isDisabled}
isLoading={isLoading}
isMulti={isMulti}
isSearchable={isSearchable}
options={options}
onChange={handleChange}
value={internalValue}
{...field}
/>
);
}}
/>

That is the simple just of it, the values need to be transformed to the string array during onChange but then the internalValue needs to be derived from the string array and options.

The full solution which caters for Multiple Selects and Creatable Selects is as follows:

First add this to the top of the component:

const [allOptions, setAllOptions] = useState(options);
// `options` is the options prop that you pass to the SelectComponent

Then update your Controller as follows:

<Controller
control={control}
name={name}
rules={validation}
render={({ field: { onChange, value, ...field } }) => {
const Component = isCreatable ? CreatableSelect : Select;
function handleChange(newValue: SingleValue | MultiValue) {
handleNewOption({ isCreatable, isMulti, newValue, setAllOptions });
onChange(getChangedValue({ isMulti, newValue }));
}
const internalValue = getInternalValue({ allOptions, isMulti, value });
return (
<Component
isRequired={Boolean(validation?.required)}
isClearable={isClearable}
isDisabled={isDisabled}
isLoading={isLoading}
isMulti={isMulti}
isSearchable={isSearchable}
options={options}
onChange={handleChange}
value={internalValue}
{...field}
/>
);
}}
/>

And then here are the helper functions:

interface GetChangeValueArgs {
isMulti: boolean;
newValue: SingleValue | MultiValue;
}
export function getChangedValue(
{ isMulti, newValue }: GetChangeValueArgs
): MultiValue | SingleValue {
if (!newValue) {
return null;
}
if (isMulti) {
return (newValue as MultiValue).map(
(v) => v.value
) as MultiValue;
}
return newValue.value as SingleValue;
}
interface GetInternalValueArgs<T> {
allOptions: FormSelectOption<T>[];
isMulti: boolean;
value: T | T[];
}
export function getInternalValue(
{ allOptions, isMulti, value }: GetInternalValueArgs<T>
) {
if (isMulti) {
if (!value) {
return null;
}
return (value as T[])
.map((optionValue) =>
allOptions.find((option) => option.value === optionValue)
)
.reduce((valueItems, valueItem) => {
if (!valueItem) {
return valueItems;
}
return [...valueItems, valueItem];
}, []);
}
return allOptions.find((option) => option.value === value) || null;
}
interface HandleNewOptionArgs<T> {
isCreatable: boolean;
isMulti: boolean;
newValue: SingleValue<FormSelectOption<T>> | MultiValue<FormSelectOption<T>>;
setAllOptions: Dispatch<SetStateAction<FormSelectOption<T>[]>>;
}
export function handleNewOption({
isMulti,
isCreatable,
newValue,
setAllOptions,
}: HandleNewOptionArgs) {
if (isCreatable && newValue) {
if (isMulti) {
newValue.forEach((newOption) => {
if ('__isNew__' in newOption && newOption.__isNew__) {
setAllOptions((prevOptions) => [...prevOptions, newOption]);
}
});
} else {
if (
newValue &&
'__isNew__' in newValue &&
newValue.__isNew__
) {
setAllOptions((prevOptions) => [...prevOptions, newValue]);
}
}
}
}