Cascader valuePath does not clear/reset on clearValue()/ reestValue()

💬 App Building
1
  1. My goal: I want to set new value to the cascader programmatically.
  2. Issue: On clearValue() or resetValue(), the value resets but the valuePath remains .

I also use the valuePath in my code as a reference to the selected value.

This can be reproduced.

1 Like
3

Hi @rlmnl, I was able to reproduce this and confirm this is a bug. I've sent in a feature request but I personally haven't found a workaround for this. It seems to me that the valuePath is only updated on a 'change' event (clicking through the component), which clearValue/resetValue doesn't trigger despite changing the value. I'm not familiar with a way to programmatically force a change event either.

I will keep investigating but that's all I can say for now.

4

In debug mode, I was able to use resetValue() to clear the previous selection an use setValue('last value in the cascader').
For example, if your options are: ```
[ {label: 'Engineering', value: 'eng'}, {label: 'Software Developer', value: 'dev', department: 'eng'}, {label: 'QA Tester', value: 'qa', department: 'eng'}, {label: 'Product', value: 'prod', }, {label: 'Product Manager', value: 'pm', department: 'prod'},];

setValue('pm') will make the cascader appear as 'Product / Product Manager'
setValue('qa') will make the cascader appear  'Engineering / QA Tester'
5

Hi @Jim_Zhang, yeah I had no issue changing the value of the component itself. It's specifically the valuePath property that isn't updated from resetValue, setValue, or clearValue.

6

thanks @Mike_M for looking in this bug.

I also noticed that when I click the clear or x in the cascader it also resets the valuePath. See below.

Before:
image

After clicking.
image

1 Like
9

Hey @rlmnl, just wanted to give an update. One of our engineers confirmed that the component only updates valuePath on an "onChange" event, which is only triggered by manually interacting with the component (so clicking an option or clicking the x). The setValue/clearValue/resetValue functions will not affect the valuePath. The feature request is still in for it to be fixed but I can't give any timeline on when it will be addressed.

As a workaround, I created this js function for getting the value path based on the value, values, and parentKeyByIndex properties on the cascader:

let value = cascader1.value;
const values = cascader1.values;
const indices = cascader1.parentKeyByIndex;
let parent;
let valuePath = [value];
let loop = true;
let i = 0;
while (loop) {
  if (i > values.length) return valuePath;
  if (value === values[i]) {
    if (indices[i] === "") {
      return valuePath;
    }
    parent = indices[i].split("-")[0];
    valuePath.push(parent);
    value = parent;
    i = 0;
  }
  i++;
}

You would have to add this function as an event handler when you change the cascader, and trigger it anytime you programmatically clear or change the value of the cascader as well. Let me know if you have any questions.

1 Like