ant-design: 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.Option
s. 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.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 16 (5 by maintainers)
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.https://codesandbox.io/s/61875yq9xr
@afc163 this case does require re-opening
@afc163 your example does not work in the following situation:
so i consider it’s a bug and the easiest way to solve it is to let pass your own key for option
upd: You even have this bug in your own documentation page 😃
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.
Thanks, so I should use
AutoComplete
instead? Why shouldn’t we support passingkey
to make sure that it’s unique?I’m hitting this same issue. Two
AutoComplete.Options
cannot have the samevalue
, even though theirkey
s are unique.Did anyone come up with a workaround? I can’t tell why this issue was closed.
I found a workaround.
form - is a final-form instance
PS: I just noticed it’s like the same as previous… oops )
Agreed! I am dealing with the same issue. I have to set the value property explicitly because I am showing a custom Option as follows:
In this scenario I have several options and some of them may have the same value but will not share the same type or color.
I have seen it suggested to others to use a
Select
instead but the issue is this list is not all inclusive nor is it possible to ever get an all inclusive list for this scenario so the user has to have the ability to select/type values that do not exist in the list itself.