Why react-select default value provided but still error when required is true

[Cow258]

Here are demonstration for this issue
https://codesandbox.io/s/unruffled-dhawan-5pr29?file=/src/App.js

Here are two question

1. Why does it show error message when default value provided?
2. After change the selection and submit the form, How can I only get the value of the selection?

I expected to get

{
  "fruit": "apple"
}

instead of

{
  "fruit": {
    "value": "apple",
    "label": "Apple"
  }
}

Thanks ❤️🙏

[bluebill1049]

1. you didn't do anything with defaultVal, noting is really selected it just appear to be apple is first in the selection.

2. that's the data return by react-select, to modify that you need to build a wrapper, so it only returns value, not the whole object.

[jalalmanafi]

@jalalbmnf works fine for me. Check the versions of the packages you're using and try creating a reproduction, if something that you're doing is different

rhf-v6-onchange.mp4

Version : "react-hook-form": "^7.13.0",
Yeah , i am writing same code but still return same error. Here is my code

const partnerOptions = data?.map((item: IPartner) => {
return {
label: item?.name,
value: item?.id,
};
});

defaultValues: { partner: partnerOptions?.[0],
},

type SelectProps = React.ComponentProps;

const PartnerSelect = ({
onChange,
onBlur,
value,
}: Pick<SelectProps, "onChange" | "onBlur" | "value">) => {
return (
<Select
options={partnerOptions}
placeholder="Choose partner"
styles={customerSelect}
isSearchable={false}
components={{
IndicatorSeparator: () => null,
}}
{...{ onChange, onBlur, value }}
/>
);
};

<Controller
name="partner"
control={control}
render={({ onChange, onBlur, value }: any) => (
<PartnerSelect
{...{
onChange: (item) => onChange(item),
onBlur,
value: partnerOptions?.find(
(item: any) => item?.value === value
),
}}
/>
)}
/>

[Moshyfawn]

The Controller API has changed since V6. In V7 there's a field property and inside it the onChange handler you want. Please, refer to the Controller docs for more info

render({ field }) => (
  <input onChange={event => field.onChange(event.target.value)} />
)

[jalalmanafi]

The Controller API has changed since V6. In V7 there's a field property and inside it the onChange handler you want. Please, refer to the Controller docs for more info

render({ field }) => (
  <input onChange={event => field.onChange(event.target.value)} />
)

I dont't find anything about this issue at docs , already i looked before to docs

[Moshyfawn]

If you're using RHF V7 (you said Version : "react-hook-form": "^7.13.0"),
instead of doing

render={({ onChange }) => (
  <PartnerSelect  onChange={item => onChange(item)} />
)}

you need to do

render={({ field }) => (
  <PartnerSelect  onChange={item => field.onChange(item)} />
)}

Note the field property that the onChange handler is in in V7.

The example from bluebill1049 is for the V6 of RHF

here is a working version with V6: https://codesandbox.io/s/restless-rgb-e0q7y?file=/src/App.tsx

[jalalmanafi]

FINALLY !!! WORKSS !!! THANK YOU !!!