Использование компонента Controller формы response-hook не позволяет настраиваемому Antd Select отображать метку

Question

Я использую Antd Select компонент для создания пользовательского компонента, который дает мне возможность вернуть объект вместо примитивного значения и показать вложенное значение в элементе объекта в выпадающих опциях выбора он работает нормально, и его можно проверить с помощью react-hook-form:

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

</Form.Item>

Однако это также работает с Controller компонентом он не показывает метку внутри выбранного входа:

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

для более подробной информации проверьте весь код на площадке для кодов и ящиков

Answer 1

Я думаю, что проблема связана с вашим SprintSelect innerProps

посмотрите мой ЦСБ ниже:

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

<Select onChange={props.onChange}>

Answer 2

Удаление значения из начального innerProps, не решит проблему в случае сброса или установки начальных значений формы (с помощью reset ).

вам необходимо определить value и defaultValue реквизиты для вас. Выбор (SpringSelect)

для управляемого выбора, он будет работать правильно, для сброса, но для неконтролируемого вы должны использовать функцию watch hook-form для отображения начального значения

см. ниже в поле condeSande:

Answer 3

Когда компонент находится внутри контроллера, ему отправляется value prop. И вы просто удаляете onChange и onBlur из реквизита.

Select будет использовать это значение реквизита, но это объект, поэтому он не показывает метку.

Чтобы исправить, вы можете просто удалить delete tmp.value; перед добавлением реквизита innerProps

Например: https://codesandbox.io/s/vibrant-river-8r4dt

Я ставлю console.log, как вы можете видеть department1 имеет value поле