fix(Cascader): first level menu always can collapse next level menus， c…

…lose #4472 (#4502)
alibaba-fusion · Oct 31, 2023 · c8ed0b5 · c8ed0b5
1 parent 28266ad
commit c8ed0b5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/src/cascader/cascader.jsx b/src/cascader/cascader.jsx
@@ -243,6 +243,7 @@ class Cascader extends Component {
         const st = {
             value: normalizedValue,
             expandedValue: realExpandedValue,
+            isExpandedValueSetByAction: false,
         };
         if (multiple && !checkStrictly && !canOnlyCheckLeaf) {
             st.value = getAllCheckedValues(st.value, v2n, p2n);
@@ -280,13 +281,20 @@ class Cascader extends Component {
                 states.value = getAllCheckedValues(states.value, v2n, p2n);
             }
 
-            if (!state.expandedValue.length && !('expandedValue' in props)) {
+            if (
+                // 非受控模式下，若已经通过用户事件调整了expandedValue，则忽略下面的空值兜底处理
+                !state.isExpandedValueSetByAction &&
+                !state.expandedValue.length &&
+                !('expandedValue' in props)
+            ) {
                 states.expandedValue = getExpandedValue(states.value[0], v2n, p2n);
             }
         }
 
         if ('expandedValue' in props) {
             states.expandedValue = normalizeValue(props.expandedValue);
+            // 受控模式则重置isExpandedValueSetByAction
+            states.isExpandedValueSetByAction = false;
         }
 
         return {
@@ -518,7 +526,7 @@ class Cascader extends Component {
             }
 
             const callback = () => {
-                this.setExpandValue(expandedValue);
+                this.setExpandValue(expandedValue, true);
 
                 if (focusedFirstChild) {
                     const endExpandedValue = expandedValue[expandedValue.length - 1];
@@ -539,13 +547,14 @@ class Cascader extends Component {
     }
 
     handleMouseLeave() {
-        this.setExpandValue([...this.lastExpandedValue]);
+        this.setExpandValue([...this.lastExpandedValue], true);
     }
 
-    setExpandValue(expandedValue) {
+    setExpandValue(expandedValue, isExpandedValueSetByAction = false) {
         if (!('expandedValue' in this.props)) {
             this.setState({
                 expandedValue,
+                isExpandedValueSetByAction,
             });
         }
 
@@ -607,7 +616,7 @@ class Cascader extends Component {
     handleFold() {
         const { expandedValue } = this.state;
         if (expandedValue.length > 0) {
-            this.setExpandValue(expandedValue.slice(0, -1));
+            this.setExpandValue(expandedValue.slice(0, -1), true);
         }
 
         this.setState({

diff --git a/test/cascader/index-spec.js b/test/cascader/index-spec.js
@@ -568,7 +568,7 @@ describe('Cascader', () => {
             document.body.removeChild(div);
             throw new Error(err);
         }
-        
+
     });
 
     it('should set the style of the cascader inner node', () => {
@@ -619,6 +619,33 @@ describe('Cascader', () => {
         ReactDOM.unmountComponentAtNode(div);
         document.body.removeChild(div);
     });
+
+    // Fix https://github.com/alibaba-fusion/next/issues/4472
+    it('Empty items at first level can collapse the next level panel while cross value', () => {
+        const dataSource = [
+            {
+                label: '1',
+                value: '1'
+            },
+            {
+                label: '2',
+                value: '2',
+                children: [
+                    {
+                        label: '2_1',
+                        value: '2_1'
+                    }
+                ]
+            }
+        ];
+        const wrapper = mount(<Cascader value={['2_1']} multiple dataSource={dataSource}/>);
+        assert(wrapper.find('.next-cascader-menu-wrapper').length === 2);
+        const el = wrapper.find('.next-menu-item[title="1"]').getDOMNode();
+        assert(el);
+        ReactTestUtils.Simulate.click(el);
+        wrapper.update();
+        assert(wrapper.find('.next-cascader-menu-wrapper').length === 1);
+    });
 });
 
 function compareDOMAndData(wrapper, value, expandedValue) {