[BUG] Key issue

[imdkbj]

Describe the bug
Can't use two list with same value, getting error of unique key.

Expected behaviour
Key should not depend on the value prop.
There should be option for custom value, label like as react select.

  <Select
                          isDisabled={!stateId}
                          options={citiesArray}
                          classNamePrefix="select"
                          getOptionValue={({ id }) => id}
                          getOptionLabel={({ name }) => name}
                          theme={selectThemeColors}
                          className={'react-select'}
                          {...field}
                        />

[kkaplinski]

@imdkbj Can you explain your use case ? You want to have two options on the list with the same value, or you want to have two select lists with the same options ?

[imdkbj]

@kkaplinski Thanks for the quick response.Let me explain the use case.

We will get data from server in following format.

const data1 = [
    { id: 1, name: 'Name1' },
    { id: 2, name: 'Name2' },
]

const data2 = [
    { id: 1, name: 'X' },
    { id: 2, name: 'Y' },
]

These will be assigned to two different Select list.

So, We need to manually process the array to convert in label, value key of the objects.
This will show error for two children with the same key.
Will also throw - measure cannot find view with tag #2687

A bonus issue : Dynamic option array will not update. ( I have a hook which will fetch data from server but found that option list not updated with the data. I have to trigger the component via a key change.)

[kkaplinski]

Hello @imdkbj. Thank you for the comments. Two lists with the same values/keys should not be a problem - you will have two separate components.
Regarding to loading options async: We are not supporting currently this possibility, but we will think about it. For now you can fetch data from server and show select component after new data arrived.

[imdkbj]

Hmm, Thanks for the info.