reactjsreact-selectreact-hook-formreact-sortable-hoc

Sortable multi select component not re-rendering with updated selected values

I'm trying to use a sortable multi select component (react-select) within a form managed with react-hook-form. When I drag my items to re-order them it updates my form value as expected but I can't get the ui to reflect this change.

Some help or just another pair of eyes would be highly appreciated.

Here is a code sandbox, you can try to re-order the values and see the output above is updated but not in the select component.

https://codesandbox.io/s/priceless-bohr-4jtkw?file=/src/App.tsx

Solution

  • I'm not massively au fait with react-select, but I have seen the defaultValue prop used before and it does just that - sets the initial default.

    Changing it to value yields a working sortable select.