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

…sion#4873
zizairufengLT · Aug 23, 2024 · 0674cc6 · 0674cc6
1 parent b300a60
commit 0674cc6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/components/select/__tests__/index-spec.tsx b/components/select/__tests__/index-spec.tsx
@@ -893,7 +893,7 @@ describe('AutoComplete', () => {
             visible: true,
         });
         cy.get('input').should('have.value', 'yyy');
-        cy.get('.next-menu-item').should('have.length', 2);
+        cy.get('.next-menu-item').should('have.length', 1);
     });
 
     it('should support empty value from dataSource', () => {
@@ -1084,6 +1084,21 @@ 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,
+        });
+        cy.get('input').should('have.value', '');
+        cy.get('.next-menu-item').should('have.length', 2);
+    });
+
     describe('react api', () => {
         it('calls componentWillReceiveProps', () => {
             cy.rerender('Demo', { value: '30' });

diff --git a/components/select/auto-complete.tsx b/components/select/auto-complete.tsx
@@ -88,10 +88,6 @@ class AutoComplete extends Base<AutoCompleteProps, AutoCompleteState> {
     componentDidUpdate(prevProps: AutoCompleteProps) {
         const props = this.props;
 
-        if ('value' in props) {
-            this.dataStore.setOptions({ key: props.value });
-        }
-
         if (props.filter !== prevProps.filter) {
             this.dataStore.setOptions({
                 filter: props.filter,
@@ -103,9 +99,19 @@ class AutoComplete extends Base<AutoCompleteProps, AutoCompleteState> {
             });
         }
 
+        let dataSource;
+
         if (prevProps.children !== props.children || prevProps.dataSource !== props.dataSource) {
+            dataSource = this.setDataSource(props);
+        }
+        if ('value' in props) {
+            if (prevProps.value !== props.value) {
+                dataSource = this.dataStore.updateByKey(props.value);
+            }
+        }
+        if (dataSource) {
             this.setState({
-                dataSource: this.setDataSource(props),
+                dataSource,
             });
 
             // remote dataSource and focused

diff --git a/components/select/data-store.ts b/components/select/data-store.ts
@@ -54,7 +54,7 @@ class DataStore {
         return this.updateAll();
     }
 
-    updateByKey(key: string) {
+    updateByKey(key?: string | number | null) {
         if (key === this.options.key) {
             return this.getMenuDS();
         }