Option of AutoComplete Select should not use value as a key, as value may not be unique and React requires keys to be unique

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.8.4

Environment

Chromium 68.0.3440.75, Firefox ESR 52.9.0

Reproduction link

Steps to reproduce

Use Select component and pass key and value properties to its Select.Options. Make sure that there are two same value values. Notice warning about duplicate keys in the browser’s console.

What is expected?

key property in Select.Option component is used as component key.

What is actually happening?

value property is being used as component key instead.

---

One can notice the bug while looking at https://github.com/ant-design/ant-design/blob/3.8.4/components/select/index.tsx, the Select.Option and Select.OptGroup components does not support key property as one could expect after reading documentation.

export interface OptionProps {
  disabled?: boolean;
  value?: string | number;
  title?: string;
  children?: React.ReactNode;
}

export interface OptGroupProps {
  label?: React.ReactNode;
}

That issue was raised before in #11074.

[afc163]

I don’t know what component you should use but probably you need Select[showSearch], you can checkout it. But still, value of AutoComplete should not be duplicated.

[syberen]

This still appears to be a problem. I can set a key prop on <AutoComplete.Option>, however as soon as I set a value prop this is used as the key.

I understand that value should not be duplicated, but in some cases this is not avoidable, for example when using a Belgian zip code API, where multiple towns can have the same zip code.