fix: Fixed the display problem of cascader with single selection, controlled value and value undefined, asynchronous loading, and showNext set to hover when loading multiple projects at the same time (#2832)

packages/semi-foundation/cascader/foundation.ts

@@ -242,7 +242,7 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     updateLoadedKeyRefValue: (keys: Set<string>) => void;
     getLoadedKeyRefValue: () => Set<string>;
     setEmptyContentMinWidth: (minWidth: number) => void;
-    getTriggerWidth: () => number;
+    getTriggerWidth: () => number
 }
 
 export default class CascaderFoundation extends BaseFoundation<CascaderAdapter, BasicCascaderProps, BasicCascaderInnerData> {
@@ -521,7 +521,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
             }
             keyEntities[key] = optionNotExist as BasicEntity;
             // Fix: 1155, if the data is loaded asynchronously to update treeData, the emptying operation should not be done when entering the updateSelectedKey method
-        } else if (loading) {
+        } else if (loading || loadingKeys?.size) {
             // Use assign to avoid overwriting the'not-exist- * 'property of keyEntities after asynchronous loading
             // Overwriting'not-exist- * 'will cause selectionContent to be emptied unexpectedly when clicking on a dropDown item
             updateStates.keyEntities = assign(keyEntityState, keyEntities);

packages/semi-ui/cascader/_story/cascader.stories.jsx

@@ -2517,4 +2517,100 @@ export const PrefixSuffix = () => {
       />
     </>
   )
+}
+
+export const Fixed2831 = () => {
+    const [value, setValue] = useState(undefined);
+    const [productAndBusinessData, setProductAndBusinessData] = useState([
+        {
+        label: 'TCS Manager',
+        value: 'TCS Manager',
+        children: [
+            {
+            label: '0',
+            value: '0',
+            },
+            {
+            label: '1',
+            value: '1',
+            },
+            {
+            label: '2',
+            value: '2',
+            },
+            {
+            label: '3',
+            value: '3',
+            },
+        ],
+        },
+        {
+        label: 'AAA Manager',
+        value: 'AAA Manager',
+        children: [
+            {
+            label: '4',
+            value: '4',
+            },
+            {
+            label: '5',
+            value: '5',
+            },
+            {
+            label: '6',
+            value: '6',
+            },
+            {
+            label: '7',
+            value: '7',
+            },
+        ],
+        },
+    ]);
+    return (
+        <Cascader
+            value={value}
+            field="ss"
+            placeholder={('tcs_manager_business_info')}
+            treeData={productAndBusinessData}
+            showNext="hover"
+            changeOnSelect
+            showClear
+            autoAdjustOverflow={false}
+            onChange={(value) => {setValue(value)}}
+            loadData={selectedOpt => {
+                if (!selectedOpt) {
+                return Promise.resolve();
+                }
+                const targetOpt = selectedOpt[selectedOpt.length - 1];
+                const { value } = targetOpt;
+                if (!value) {
+                return Promise.resolve();
+                }
+                return new Promise( (res) => {
+                    setTimeout(() => {
+                        setProductAndBusinessData(origin => {
+                        const newData = origin.map(i => {
+                        const children = (i.children || []).map((j, jIndex) => {
+                            if (j.children || j.value !== value) {
+                            return { ...j };
+                            }
+                            const subChildren = Array.from({ length: 5 }).map((i, index) => ({
+                            label: jIndex + '' + index,
+                            value: jIndex + '' + index,
+                            disabled: false,
+                            isLeaf: true,
+                            }));
+                            return { ...j, children: subChildren };
+                        });
+                        return { ...i, children };
+                        });
+                        return newData;
+                    });
+                        res();
+                    }, 2000);
+                });
+            }}
+            />
+    );
 }