I'm using Antd Select ponent to build a custom ponent which gives me the ability to return an object instead of a primitive value and show nested value in object item in the select dropdown options, it works fine and it can be validated using react-hook-form :

<Form.Item ... >
  <SpringSelect style={{ width: "200px" }} options={departments} placeholder="Department 2"
            name="department2"  onChange={e => {setValue("department2", e);}}/>

</Form.Item>

This also works with Controller ponent however it doesn't show the label inside the select input :

<Controller as={<SpringSelect style={{ width: "200px" }} />}
            placeholder="Department 1" name="department1" options={departments}
            onChange={([e]) => {return { value: e };}} control={control}      />

for more details check the whole code in the codesandbox playground

I'm using Antd Select ponent to build a custom ponent which gives me the ability to return an object instead of a primitive value and show nested value in object item in the select dropdown options, it works fine and it can be validated using react-hook-form :

<Form.Item ... >
  <SpringSelect style={{ width: "200px" }} options={departments} placeholder="Department 2"
            name="department2"  onChange={e => {setValue("department2", e);}}/>

</Form.Item>

This also works with Controller ponent however it doesn't show the label inside the select input :

<Controller as={<SpringSelect style={{ width: "200px" }} />}
            placeholder="Department 1" name="department1" options={departments}
            onChange={([e]) => {return { value: e };}} control={control}      />

for more details check the whole code in the codesandbox playground

• javascript
• reactjs
• antd
• react-hook-form

Share Improve this question Follow edited Feb 10, 2020 at 20:03 Boussadjra Brahim asked Feb 10, 2020 at 19:40 Boussadjra BrahimBoussadjra Brahim 1

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I think the problem is due to your SprintSelect innerProps

have a look my CSB below:

https://codesandbox.io/s/suspicious-platform-tlr55

<Select onChange={props.onChange}>

When the ponent is inside the controller a value prop is send to it. And your are just deleting the onChange and onBlur from the props.

Select will use this prop value, but it's a object, that is why it doesn't show the label.

To fixed you can just delete delete tmp.value; before add the props to innerProps

Exemple: https://codesandbox.io/s/vibrant-river-8r4dt

I place a console.log, as you can see department1 has a value field