fix(cascader): 修复外部值变化时同步问题 (#7046)

* fix(cascader): 修复外部值变化时同步问题

- 移除visible条件判断，确保值同步
- 添加测试用例验证值同步逻辑

* feat(cascader): 使用 useDeepCompareEffect 优化性能

- 替换 useEffect 为 useDeepCompareEffect 避免不必要的重新渲染
- 添加测试用例验证父组件重渲染时保持选中状态

* refactor(cascader): 优化组件导入和状态管理

- 调整导入顺序和分组
- 替换useDeepCompareEffect为useEffect
- 简化状态管理逻辑

Author: Passing-of-A-Dream

src/components/cascader/cascader.tsx

@@ -1,24 +1,23 @@
 import React, {
-  useState,
-  useEffect,
   ReactNode,
   forwardRef,
+  useEffect,
   useImperativeHandle,
+  useState,
 } from 'react'
-import Popup, { PopupProps } from '../popup'
-import {
+import type { FieldNamesType } from '../../hooks'
+import { useFieldNames } from '../../hooks'
+import { NativeProps, withNativeProps } from '../../utils/native-props'
+import { usePropsValue } from '../../utils/use-props-value'
+import { mergeProps } from '../../utils/with-default-props'
+import CascaderView, {
+  CascaderOption,
   CascaderValue,
   CascaderValueExtend,
-  CascaderOption,
 } from '../cascader-view'
-import { mergeProps } from '../../utils/with-default-props'
-import { NativeProps, withNativeProps } from '../../utils/native-props'
-import { usePropsValue } from '../../utils/use-props-value'
-import CascaderView from '../cascader-view'
-import { useConfig } from '../config-provider'
 import { useCascaderValueExtend } from '../cascader-view/use-cascader-value-extend'
-import { useFieldNames } from '../../hooks'
-import type { FieldNamesType } from '../../hooks'
+import { useConfig } from '../config-provider'
+import Popup, { PopupProps } from '../popup'
 
 const classPrefix = `adm-cascader`
 
@@ -120,9 +119,7 @@ export const Cascader = forwardRef<CascaderRef, CascaderProps>((p, ref) => {
   const [innerValue, setInnerValue] = useState<CascaderValue[]>(value)
 
   useEffect(() => {
-    if (!visible) {
-      setInnerValue(value)
-    }
+    setInnerValue(value)
   }, [visible, value])
 
   const cascaderElement = withNativeProps(

src/components/cascader/tests/cascader.test.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { fireEvent, render, testA11y, waitFor } from 'testing'
-import Cascader from '../'
+import { fireEvent, render, screen, testA11y, waitFor } from 'testing'
+import Cascader, { CascaderValue } from '../'
 import { options } from '../demos/data'
 
 describe('Cascader', () => {
@@ -52,6 +52,95 @@ describe('Cascader', () => {
     expect(onConfirm.mock.calls[0][0]).toEqual(['浙江', '杭州'])
   })
 
+  test('should sync value when visible and external value changes', async () => {
+    const App = () => {
+      const [visible, setVisible] = useState(false)
+      const [value, setValue] = useState<CascaderValue[]>([])
+
+      return (
+        <>
+          <button onClick={() => setVisible(true)}>Open</button>
+          <button onClick={() => setValue(['安徽', '合肥'])}>Set Value</button>
+          <Cascader
+            options={options}
+            visible={visible}
+            value={value}
+            onConfirm={val => {
+              setValue(val)
+              setVisible(false)
+            }}
+            onClose={() => setVisible(false)}
+            onCancel={() => setVisible(false)}
+          />
+        </>
+      )
+    }
+
+    render(<App />)
+
+    fireEvent.click(screen.getByText('Open'))
+    await waitFor(() => {
+      expect(screen.getByText('浙江')).toBeInTheDocument()
+    })
+
+    // While the popup is open, change the external value
+    fireEvent.click(screen.getByText('Set Value'))
+
+    // The cascader should reflect the new value (合肥 should appear in both tab and list)
+    await waitFor(() => {
+      const matches = screen.getAllByText('合肥')
+      expect(matches.length).toBeGreaterThanOrEqual(1)
+    })
+  })
+
+  test('should preserve draft selection when parent re-renders with same value', async () => {
+    const App = () => {
+      const [visible, setVisible] = useState(false)
+      const [value, setValue] = useState<CascaderValue[]>([])
+      const [, setTick] = useState(0)
+
+      return (
+        <>
+          <button onClick={() => setVisible(true)}>Open</button>
+          {/* Trigger a parent re-render without changing value content */}
+          <button onClick={() => setTick(t => t + 1)}>Rerender</button>
+          <Cascader
+            options={options}
+            visible={visible}
+            value={value}
+            onConfirm={val => {
+              setValue(val)
+              setVisible(false)
+            }}
+            onClose={() => setVisible(false)}
+            onCancel={() => setVisible(false)}
+          />
+        </>
+      )
+    }
+
+    render(<App />)
+
+    fireEvent.click(screen.getByText('Open'))
+    await waitFor(() => {
+      expect(screen.getByText('浙江')).toBeInTheDocument()
+    })
+
+    // User selects 浙江 in the cascader (draft, not confirmed)
+    fireEvent.click(screen.getByText('浙江'))
+
+    // Wait for the selection to take effect
+    await waitFor(() => {
+      expect(screen.getAllByText('浙江').length).toBeGreaterThanOrEqual(2)
+    })
+
+    // Parent re-renders with the same value content ([])
+    fireEvent.click(screen.getByText('Rerender'))
+
+    // The draft selection should be preserved — 浙江 should still appear as a selected tab
+    expect(screen.getAllByText('浙江').length).toBeGreaterThanOrEqual(2)
+  })
+
   test('use in an imperative way', async () => {
     const fn = jest.fn()
     const onClick = async () => {