fix(Select): adjust auto-complete menu length issue, close alibaba-fu…

…sion#4873
zizairufengLT · Aug 21, 2024 · a38d357 · a38d357
1 parent 21f9e3a
commit a38d357
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/components/select/__tests__/index-spec.tsx b/components/select/__tests__/index-spec.tsx
@@ -1085,6 +1085,12 @@ describe('AutoComplete', () => {
     });
 
     it('should render currect dataSource when value changed', () => {
+        cy.rerender('Demo', {
+            value: 'xxx',
+            visible: true,
+        });
+        cy.get('input').should('have.value', 'xxx');
+        cy.get('.next-menu-item').should('have.length', 1);
         cy.rerender('Demo', {
             value: undefined,
             visible: true,

diff --git a/components/select/auto-complete.tsx b/components/select/auto-complete.tsx
@@ -11,8 +11,8 @@ import type { AutoCompleteProps, ObjectItem, VisibleChangeType } from './types';
 const { bindCtx, noop } = func;
 
 export interface AutoCompleteState extends BaseState {
-    value: string;
-    highlightKey: string;
+    value: string | undefined | null;
+    highlightKey: string | undefined | null;
 }
 
 /**
@@ -88,14 +88,6 @@ class AutoComplete extends Base<AutoCompleteProps, AutoCompleteState> {
     componentDidUpdate(prevProps: AutoCompleteProps) {
         const props = this.props;
 
-        if ('value' in props) {
-            if (prevProps.value !== props.value) {
-                this.setState({
-                    dataSource: this.dataStore.updateByKey(props.value),
-                });
-            }
-        }
-
         if (props.filter !== prevProps.filter) {
             this.dataStore.setOptions({
                 filter: props.filter,
@@ -120,6 +112,13 @@ class AutoComplete extends Base<AutoCompleteProps, AutoCompleteState> {
             if (!props.filterLocal && !props.popupContent) {
                 this.setFirstHightLightKeyForMenu();
             }
+        } else if ('value' in props) {
+            if (prevProps.value !== props.value) {
+                // this.setState({
+                //     dataSource: this.dataStore.updateByKey(props.value),
+                // });
+                this.handleChange(props.value as string | undefined, 'update');
+            }
         }
     }
 
@@ -147,7 +146,7 @@ class AutoComplete extends Base<AutoCompleteProps, AutoCompleteState> {
         this.setVisible(false, 'itemClick');
     }
 
-    handleSelectEvent(key: string, item: ObjectItem, triggerType: VisibleChangeType) {
+    handleSelectEvent(key: string | undefined, item: ObjectItem, triggerType: VisibleChangeType) {
         const value = ((item && item[this.props.fillProps!]) as string) || key;
 
         if (triggerType === 'itemClick' || triggerType === 'enter') {
@@ -159,7 +158,7 @@ class AutoComplete extends Base<AutoCompleteProps, AutoCompleteState> {
     }
 
     handleChange = (
-        value: string,
+        value: string | undefined | null,
         proxy: ChangeEvent<HTMLElement> | VisibleChangeType,
         item?: ObjectItem
     ) => {

diff --git a/components/select/types.ts b/components/select/types.ts
@@ -262,7 +262,11 @@ export interface AutoCompleteProps
      * AutoComplete 发生改变时触发的回调
      * @en Callback when AutoComplete changes
      */
-    onChange?: (value: string, actionType: string, item?: ObjectItem) => void;
+    onChange?: (
+        value: string | number | undefined | null,
+        actionType: string,
+        item?: ObjectItem
+    ) => void;
 
     onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;