fix(Cascader): failed to update tabs when value is zero (#7778)

src/cascader/README.md

@@ -163,7 +163,7 @@ export default {
 How to use: [Custom Theme](#/en-US/theme).
 
 | Name                              | Default Value   | Description |
-| ------------------------------------ | --------------- | ----------- |
+| --------------------------------- | --------------- | ----------- |
 | @cascader-header-height           | `48px`          | -           |
 | @cascader-title-font-size         | `@font-size-lg` | -           |
 | @cascader-title-line-height       | `20px`          | -           |
@@ -174,5 +174,5 @@ How to use: [Custom Theme](#/en-US/theme).
 | @cascader-tabs-height             | `48px`          | -           |
 | @cascader-active-color            | `@red`          | -           |
 | @cascader-options-height          | `384px`         | -           |
-| @cascader-tab-title-color            | `@text-color`   | -           |
+| @cascader-tab-color               | `@text-color`   | -           |
-| @cascader-unselected-tab-title-color | `@gray-6`       | -           |
+| @cascader-unselected-tab-color    | `@gray-6`       | -           |

src/cascader/README.zh-CN.md

@@ -175,7 +175,7 @@ export default {
 组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
 
 | 名称                              | 默认值          | 描述 |
-| ------------------------------------ | --------------- | ---- |
+| --------------------------------- | --------------- | ---- |
 | @cascader-header-height           | `48px`          | -    |
 | @cascader-title-font-size         | `@font-size-lg` | -    |
 | @cascader-title-line-height       | `20px`          | -    |
@@ -186,5 +186,5 @@ export default {
 | @cascader-tabs-height             | `48px`          | -    |
 | @cascader-active-color            | `@red`          | -    |
 | @cascader-options-height          | `384px`         | -    |
-| @cascader-tab-title-color            | `@text-color`   | -    |
+| @cascader-tab-color               | `@text-color`   | -    |
-| @cascader-unselected-tab-title-color | `@gray-6`       | -    |
+| @cascader-unselected-tab-color    | `@gray-6`       | -    |

src/cascader/index.js

@@ -35,7 +35,7 @@ export default createComponent({
     },
 
     value(value) {
-      if (value) {
+      if (value || value === 0) {
         const values = this.tabs.map((tab) => tab.selectedOption?.value);
         if (values.indexOf(value) !== -1) {
           return;
@@ -71,7 +71,7 @@ export default createComponent({
     },
 
     updateTabs() {
-      if (this.value) {
+      if (this.value || this.value === 0) {
         const selectedOptions = this.getSelectedOptionsByValue(
           this.options,
           this.value
@@ -212,7 +212,7 @@ export default createComponent({
       return (
         <Tab
           title={title}
-          titleClass={bem('tab-title', {
+          titleClass={bem('tab', {
             unselected: !selectedOption,
           })}
         >

src/cascader/index.less

@@ -36,12 +36,12 @@
     }
   }
 
-  &__tab-title {
+  &__tab {
-    color: @cascader-tab-title-color;
+    color: @cascader-tab-color;
     font-weight: @font-weight-bold;
 
     &--unselected {
-      color: @cascader-unselected-tab-title-color;
+      color: @cascader-unselected-tab-color;
     }
   }
 

src/cascader/test/__snapshots__/index.spec.js.snap

@@ -6,3 +6,43 @@ exports[`should select correct option when value changed 1`] = `
 <li class="van-cascader__option van-cascader__option--selected"><span>Ouhai</span><i class="van-icon van-icon-success van-cascader__selected-icon">
     <!----></i></li>
 `;
+
+exports[`should update tabs when previous tab is clicked 1`] = `
+<div class="van-cascader">
+  <div class="van-cascader__header">
+    <h2 class="van-cascader__title"></h2><i class="van-icon van-icon-cross van-cascader__close-icon">
+      <!----></i>
+  </div>
+  <div class="van-tabs van-tabs--line van-cascader__tabs">
+    <div class="van-tabs__wrap van-tabs__wrap--scrollable">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
+        <div role="tab" class="van-tab van-cascader__tab"><span class="van-tab__text">Jiangsu</span></div>
+        <div role="tab" class="van-tab van-tab--active van-cascader__tab van-cascader__tab--unselected" aria-selected="true"><span class="van-tab__text">请选择</span></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
+      </div>
+    </div>
+    <div class="van-tabs__content van-tabs__content--animated">
+      <div class="van-tabs__track" style="transform: translate3d(-100%, 0, 0); transition-duration: 0.3s;">
+        <div role="tabpanel" class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive" aria-hidden="true">
+          <div class="van-tab__pane">
+            <ul class="van-cascader__options">
+              <li class="van-cascader__option"><span>Zhejiang</span></li>
+              <li class="van-cascader__option van-cascader__option--selected"><span>Jiangsu</span><i class="van-icon van-icon-success van-cascader__selected-icon">
+                  <!----></i></li>
+            </ul>
+          </div>
+        </div>
+        <div role="tabpanel" class="van-tab__pane-wrapper">
+          <div class="van-tab__pane">
+            <ul class="van-cascader__options">
+              <li class="van-cascader__option"><span>Nanjing</span></li>
+              <li class="van-cascader__option"><span>Wuxi</span></li>
+              <li class="van-cascader__option"><span>Xuzhou</span></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/cascader/test/index.spec.js

@@ -94,3 +94,31 @@ test('should select correct option when value changed', async () => {
   const lastSelectedOption = selectedOptions.at(selectedOptions.length - 1);
   expect(lastSelectedOption).toMatchSnapshot();
 });
+
+test('should reset selected options when value is set to emtpy', async () => {
+  const wrapper = mount(Cascader, {
+    propsData: {
+      value: '330304',
+      options,
+    },
+  });
+
+  await later();
+  wrapper.setProps({ value: '' });
+  await later();
+  expect(wrapper.contains('.van-cascader__option--selected')).toBeFalsy();
+});
+
+test('should update tabs when previous tab is clicked', async () => {
+  const wrapper = mount(Cascader, {
+    propsData: {
+      value: '330304',
+      options,
+    },
+  });
+
+  await later();
+  wrapper.findAll('.van-cascader__option').at(1).trigger('click');
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+});

src/style/var.less

@@ -212,8 +212,8 @@
 @cascader-tabs-height: 48px;
 @cascader-active-color: @red;
 @cascader-options-height: 384px;
-@cascader-tab-title-color: @text-color;
+@cascader-tab-color: @text-color;
-@cascader-unselected-tab-title-color: @gray-6;
+@cascader-unselected-tab-color: @gray-6;
 
 // Cell
 @cell-font-size: @font-size-md;