search

carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
598 stars 177 forks source link

cv-dropdown cannot clear previous selection, the item being selected is not the one being displayed #986

Open qiaoyining0424 opened 3 years ago

qiaoyining0424 commented 3 years ago

We came across two issues that when using cv-dropdown and cv-dropdown-item, the selected value is not being cleared after closing the window. Also, sometimes the one I selected is not the one being displayed.

To reproduce the issue, please click the below sandbox link: https://codesandbox.io/s/carbon-components-vue-forked-sp7yx?file=/src/TestComponent.vue

Detailed steps:

  1. Click open pop up 0 button: 1.1 Select new renewal preference for description 1 to R 1.2 Select new renewal preference for description 2 to T 1.3 Select new renewal preference for description 1 to D
  2. Click cancel to close the pop up window
  3. Click open pop up 1 button, we can see the previous selection is in this new pop up window, which means the previous selection is not cleared. 3.1 For description 2, select R as new renewal preference and you can see the item being displayed is still T.

The code itself shouldn't cause this chaos since I replaced all cv-dropdown and cv-dropdown-item to select and option and all functions behave well.

lee-chase commented 3 years ago

Your issues are due to the use of a simple index as key, which is an antipattern.

The minimal solution would be to supply a unique string to the modal for each data set and use it to construct your keys. Personally I would pass a unique ID in for each row as well.

If you wish to set the initial state of the dropdown pass it an initial value e.g. <cCV22 7JWdropdown v-else :placeholder="row[cellIndex-1]" :value="row[cellIndex-1]">

Also, add a key to the first time in your dropdown, it will help Vue re-render correctly.

qiaoyining0424 commented 3 years ago

Thanks for pointing this out! Will try with your suggestion.

github-actions[bot] commented 2 weeks ago

This issue has been marked as stale because it has required additional info or a response from the author for over 14 days. When you get the chance, please comment with the additional info requested. Otherwise, this issue will be closed in 14 days.