Nothing is displayed when value is programatically set and getOptionValue is used

When getOptionValue is used, value or defaultValue still require using full object and don’t respect the getOptionValue result.

const allItems: Item[] = [
  { id: 1, name: "Tesla" },
  { id: 2, name: "BMW" },
  { id: 3, name: "Audi" },
  { id: 4, name: "Mazda" }
];

  const getLabel = (item: Item) => item.name;
  const getValue = (item: Item) => item.id.toString();

And when I use

        <Select
          getOptionLabel={getLabel}
          getOptionValue={getValue}
          options={allItems}
          defaultValue={allItems[0].id.toString()}
        />

it doesn’t work and doesn’t select the proper value. Neither does using value property. But if I use defaultValue={allItems[0]} it works - so it seems it doesn’t respect the usage of getOptionValue.

Normally, I would use something like allItems.find(item => item.id.toString() === selectedId), but that is not possible to use in AsyncSelect, since I don’t have access to loaded options.

(I’m trying to use react-select with react-hook-forms and I have noticed these issues while working on this integration. Here is more detailed example: https://codesandbox.io/s/admiring-monad-tq2er?file=/src/App.tsx )

[klinki]

Hello @klinki,

the values for the value and defaultValue props should have the same schema as a single option in your list of options, as both function essentially independently from the options prop. In other words: The value does not have to be in the option list.

Well, I’m not so sure about this one. Shouldn’t they have the same schema as output of getOptionValue function call?

Honestly, I don’t care that much if the value is or is not in the list (my example with array was meant as a workaround for this issue, not the solution). I just need it to respect the getOptionValue function, because I want to use react-select in the form and integrate it with react-hook-forms.

[klinki]

That’s nice, but impossible to use with AsyncSelect