Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown with dataKey attribute throws console errors. #768

Closed
functionportal opened this issue Feb 7, 2019 · 3 comments
Closed

Dropdown with dataKey attribute throws console errors. #768

functionportal opened this issue Feb 7, 2019 · 3 comments
Assignees
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@functionportal
Copy link

I'm submitting a ... (check one with "x")
[ X] bug report
[ ] feature request

Current behavior
Dropdown component when using dataKey attribute throws the following error in the console:

Warning: Encountered two children with the same key, null. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
in select (created by Dropdown)
in div (created by Dropdown)
in div (created by Dropdown)

Expected behavior
No errors.

@djapal
Copy link

djapal commented Feb 11, 2019

Happens to me too. It seems like property cannot be resolved correctly.
I think the problem is in line 606 of Dropdown.js

    return this.props.dataKey ? ObjectUtils.resolveFieldData(option.value, this.props.dataKey) : this.getOptionLabel(option);

It shouldn't search for option.value but just option.

@mertsincan
Copy link
Member

mertsincan commented Feb 18, 2019

I couldn't replicate it. Could you please attach a plunker or codesandbox link for us to replicate? You can use https://codesandbox.io/s/qjx332qq4 for the sample.

My example code;

const cars = [
            {label: 'Audi', value: {val:'Audi', key: 1}},
            {label: 'BMW', value: {val:'BMW', key: 2}},
            {label: 'Fiat', value: {val:'Fiat', key: 3}},
            {label: 'Honda', value: {val:'Honda', key:4}},
            {label: 'Jaguar', value: {val:'Jaguar', key:5}}
        ];
...

<Dropdown value={this.state.car2} options={cars} dataKey="key" .../>
<div style={{marginTop: '.5em'}}>{this.state.car2 ? 'Selected Car: ' + this.state.car2.val : 'No car selected'}</div>

@djapal
Copy link

djapal commented Feb 19, 2019

mertsincan, you assume that the list of objects passed to Dropdown will have a "value" property but this is restricting. I have used my own property as dataKey which cannot be recognized since code is searching for "value" property. I would suggest that if value property is not found, then use the option itself. Try your own example but instead of value use value1. it will log the exception.

@cagataycivici cagataycivici added the Type: Bug Issue contains a defect related to a specific component. label Feb 19, 2019
@cagataycivici cagataycivici self-assigned this Feb 19, 2019
@cagataycivici cagataycivici added this to the 3.1 milestone Feb 19, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Development

No branches or pull requests

4 participants