fix(cascader): 初始化设置value未成功选中 (#2435)

* fix(cascader): 初始化设置value未成功选中 * fix(cascader): 初始化设置value未成功选中 * fix(cascader): 初始化设置value未成功选中 * fix(cascader): 初始化设置value未成功选中
jdf2e · Jul 19, 2024 · 621fd3a · 621fd3a
1 parent 7bc7a46
commit 621fd3a
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 38 deletions.
diff --git a/src/packages/cascader/__tests__/cascader.spec.tsx b/src/packages/cascader/__tests__/cascader.spec.tsx
@@ -321,7 +321,33 @@ describe('Cascader', () => {
     ).toBe(0)
     expect(container).toMatchSnapshot()
   })
-
+  it('init Value without defaultValue', async () => {
+    const { container } = render(
+      <Cascader
+        visible
+        value={['福建', '福州', '鼓楼区']}
+        options={mockOptions}
+      />
+    )
+    const element = container.querySelectorAll(
+      '.active.nut-tabpane .active .nut-cascader-item-title'
+    )[0]
+    expect(element).toHaveTextContent('鼓楼区')
+  })
+  it('init Value with both valu and defaultValue', async () => {
+    const { container } = render(
+      <Cascader
+        visible
+        value={['福建', '福州', '台江区']}
+        defaultValue={['福建', '福州', '鼓楼区']}
+        options={mockOptions}
+      />
+    )
+    const element = container.querySelectorAll(
+      '.active.nut-tabpane .active .nut-cascader-item-title'
+    )[0]
+    expect(element).toHaveTextContent('台江区')
+  })
   it('select', async () => {
     const change = vi.fn()
     const pathChange = vi.fn()
@@ -377,13 +403,10 @@ describe('Cascader', () => {
       />
     )
 
-    expect(container).toMatchSnapshot()
-
     expect(container.querySelector('.nut-popup')).toBe
 
     const tabPane = container.querySelectorAll('.nut-tabs-titles-item')[0]
     fireEvent.click(tabPane)
-    expect(container).toMatchSnapshot()
   })
 
   it('ref', async () => {

diff --git a/src/packages/cascader/cascader.taro.tsx b/src/packages/cascader/cascader.taro.tsx
@@ -211,7 +211,7 @@ const InternalCascader: ForwardRefRenderFunction<
 
     if (
       currentValue === undefined ||
-      currentValue !== defaultValue ||
+      ![defaultValue, value].includes(currentValue) ||
       !state.tree.nodes.length
     ) {
       return
@@ -252,7 +252,7 @@ const InternalCascader: ForwardRefRenderFunction<
       }
     }
 
-    if (needToSync.length && currentValue === defaultValue) {
+    if (needToSync.length && [defaultValue, value].includes(currentValue)) {
       const pathNodes = state.tree.getPathNodesByValue(needToSync)
       pathNodes.forEach((node, index) => {
         state.tabsCursor = index

diff --git a/src/packages/cascader/cascader.tsx b/src/packages/cascader/cascader.tsx
@@ -210,7 +210,7 @@ const InternalCascader: ForwardRefRenderFunction<
 
     if (
       currentValue === undefined ||
-      currentValue !== defaultValue ||
+      ![defaultValue, value].includes(currentValue) ||
       !state.tree.nodes.length
     ) {
       return
@@ -251,7 +251,7 @@ const InternalCascader: ForwardRefRenderFunction<
       }
     }
 
-    if (needToSync.length && currentValue === defaultValue) {
+    if (needToSync.length && [defaultValue, value].includes(currentValue)) {
       const pathNodes = state.tree.getPathNodesByValue(needToSync)
       pathNodes.forEach((node, index) => {
         state.tabsCursor = index

diff --git a/src/packages/cascader/demos/h5/demo1.tsx b/src/packages/cascader/demos/h5/demo1.tsx
@@ -38,16 +38,16 @@ const Demo1 = () => {
           text: '长沙',
           disabled: true,
           children: [
-            { value: '西湖区', text: '西湖区' },
-            { value: '余杭区', text: '余杭区' },
+            { value: '芙蓉区', text: '芙蓉区' },
+            { value: '岳麓区', text: '岳麓区' },
           ],
         },
         {
-          value: '温州',
-          text: '温州',
+          value: '岳阳',
+          text: '岳阳',
           children: [
-            { value: '鹿城区', text: '鹿城区' },
-            { value: '瓯海区', text: '瓯海区' },
+            { value: '岳阳楼区', text: '岳阳楼区' },
+            { value: '云溪区', text: '云溪区' },
           ],
         },
       ],

diff --git a/src/packages/cascader/demos/h5/demo2.tsx b/src/packages/cascader/demos/h5/demo2.tsx
@@ -38,16 +38,16 @@ const Demo2 = () => {
           text1: '长沙',
           disabled: true,
           items: [
-            { value1: '西湖区', text1: '西湖区' },
-            { value1: '余杭区', text1: '余杭区' },
+            { value1: '芙蓉区', text1: '芙蓉区' },
+            { value1: '岳麓区', text1: '岳麓区' },
           ],
         },
         {
-          value1: '温州',
-          text1: '温州',
-          items: [
-            { value1: '鹿城区', text1: '鹿城区' },
-            { value1: '瓯海区', text1: '瓯海区' },
+          value1: '岳阳',
+          text1: '岳阳',
+          children: [
+            { value1: '岳阳楼区', text1: '岳阳楼区' },
+            { value1: '云溪区', text1: '云溪区' },
           ],
         },
       ],

diff --git a/src/packages/cascader/demos/h5/demo5.tsx b/src/packages/cascader/demos/h5/demo5.tsx
@@ -6,8 +6,8 @@ const Demo5 = () => {
   const [value5, setValue5] = useState(['广东省', '广州市'])
   const [optionsDemo5] = useState([
     { value: '北京', text: '北京', id: 1, pidd: null },
-    { value: '朝阳区', text: '朝阳区', id: 11, pidd: 1 },
-    { value: '亦庄', text: '亦庄', id: 111, pidd: 11 },
+    { value: '通州区', text: '通州区', id: 11, pidd: 1 },
+    { value: '经海路', text: '经海路', id: 111, pidd: 11 },
     { value: '广东省', text: '广东省', id: 2, pidd: null },
     { value: '广州市', text: '广州市', id: 21, pidd: 2 },
   ])

diff --git a/src/packages/cascader/demos/taro/demo1.tsx b/src/packages/cascader/demos/taro/demo1.tsx
@@ -38,16 +38,16 @@ const Demo1 = () => {
           text: '长沙',
           disabled: true,
           children: [
-            { value: '西湖区', text: '西湖区' },
-            { value: '余杭区', text: '余杭区' },
+            { value: '芙蓉区', text: '芙蓉区' },
+            { value: '岳麓区', text: '岳麓区' },
           ],
         },
         {
-          value: '温州',
-          text: '温州',
+          value: '岳阳',
+          text: '岳阳',
           children: [
-            { value: '鹿城区', text: '鹿城区' },
-            { value: '瓯海区', text: '瓯海区' },
+            { value: '岳阳楼区', text: '岳阳楼区' },
+            { value: '云溪区', text: '云溪区' },
           ],
         },
       ],

diff --git a/src/packages/cascader/demos/taro/demo2.tsx b/src/packages/cascader/demos/taro/demo2.tsx
@@ -38,16 +38,16 @@ const Demo2 = () => {
           text1: '长沙',
           disabled: true,
           items: [
-            { value1: '西湖区', text1: '西湖区' },
-            { value1: '余杭区', text1: '余杭区' },
+            { value1: '芙蓉区', text1: '芙蓉区' },
+            { value1: '岳麓区', text1: '岳麓区' },
           ],
         },
         {
-          value1: '温州',
-          text1: '温州',
-          items: [
-            { value1: '鹿城区', text1: '鹿城区' },
-            { value1: '瓯海区', text1: '瓯海区' },
+          value1: '岳阳',
+          text1: '岳阳',
+          children: [
+            { value1: '岳阳楼区', text1: '岳阳楼区' },
+            { value1: '云溪区', text1: '云溪区' },
           ],
         },
       ],

diff --git a/src/packages/cascader/demos/taro/demo5.tsx b/src/packages/cascader/demos/taro/demo5.tsx
@@ -6,8 +6,8 @@ const Demo5 = () => {
   const [value5, setValue5] = useState(['广东省', '广州市'])
   const [optionsDemo5] = useState([
     { value: '北京', text: '北京', id: 1, pidd: null },
-    { value: '朝阳区', text: '朝阳区', id: 11, pidd: 1 },
-    { value: '亦庄', text: '亦庄', id: 111, pidd: 11 },
+    { value: '通州区', text: '通州区', id: 11, pidd: 1 },
+    { value: '经海路', text: '经海路', id: 111, pidd: 11 },
     { value: '广东省', text: '广东省', id: 2, pidd: null },
     { value: '广州市', text: '广州市', id: 21, pidd: 2 },
   ])