fix(Select): hight first item with remote datasource. Close #654

alibaba-fusion · May 14, 2019 · d784ee0 · d784ee0
1 parent ebfc1a2
commit d784ee0
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 33 deletions.
diff --git a/src/select/auto-complete.jsx b/src/select/auto-complete.jsx
@@ -88,9 +88,31 @@ class AutoComplete extends Base {
     componentWillReceiveProps(nextProps) {
         if ('value' in nextProps) {
             this.dataStore.setOptions({ key: nextProps.value });
+            this.setState({
+                value: nextProps.value,
+            });
         }
 
-        super.componentWillReceiveProps(nextProps);
+        if ('visible' in nextProps) {
+            this.setState({
+                visible: nextProps.visible,
+            });
+        }
+
+        this.dataStore.setOptions({
+            filter: nextProps.filter,
+            filterLocal: nextProps.filterLocal,
+        });
+
+        if (
+            nextProps.children !== this.props.children ||
+            nextProps.dataSource !== this.props.dataSource
+        ) {
+            const dataSource = this.setDataSource(nextProps);
+            this.setState({
+                dataSource,
+            });
+        }
 
         // remote dataSource and focused
         // 因为autoComplete没有下拉数据不展示，搜索并且有数据了需要自动展示下拉

diff --git a/src/select/base.jsx b/src/select/base.jsx
@@ -175,36 +175,6 @@ export default class Base extends React.Component {
         events.on(window, 'resize', this.handleResize);
     }
 
-    componentWillReceiveProps(nextProps) {
-        if ('value' in nextProps) {
-            this.setState({
-                value: nextProps.value,
-            });
-        }
-
-        if ('visible' in nextProps) {
-            // this.state.visible = nextProps.visible;
-            this.setState({
-                visible: nextProps.visible,
-            });
-        }
-
-        this.dataStore.setOptions({
-            filter: nextProps.filter,
-            filterLocal: nextProps.filterLocal,
-        });
-
-        if (
-            nextProps.children !== this.props.children ||
-            nextProps.dataSource !== this.props.dataSource
-        ) {
-            const dataSource = this.setDataSource(nextProps);
-            this.setState({
-                dataSource,
-            });
-        }
-    }
-
     componentDidUpdate(prevProps, prevState) {
         if (
             prevProps.label !== this.props.label ||

diff --git a/src/select/select.jsx b/src/select/select.jsx
@@ -135,6 +135,10 @@ class Select extends Base {
          * 焦点事件
          */
         onFocus: PropTypes.func,
+        /**
+         * 是否自动高亮第一个选项
+         */
+        // highlightFirstItem: PropTypes.bool,
         /**
          * 失去焦点事件
          */
@@ -151,6 +155,7 @@ class Select extends Base {
         onSearchClear: noop,
         hasArrow: true,
         onRemove: noop,
+        // highlightFirstItem: true,
         valueRender: item => {
             return item.label || item.value;
         },
@@ -223,10 +228,35 @@ class Select extends Base {
             });
         }
 
-        super.componentWillReceiveProps(nextProps);
+        this.dataStore.setOptions({
+            filter: nextProps.filter,
+            filterLocal: nextProps.filterLocal,
+        });
+
+        if (
+            nextProps.children !== this.props.children ||
+            nextProps.dataSource !== this.props.dataSource
+        ) {
+            const dataSource = this.setDataSource(nextProps);
+            this.setState({
+                dataSource,
+            });
+
+            // 远程数据有更新，并且还有搜索框
+            if (
+                nextProps.showSearch &&
+                !nextProps.filterLocal &&
+                !nextProps.popupContent
+            ) {
+                this.setFirstHightLightKeyForMenu();
+            }
+        }
 
         if ('value' in nextProps) {
-            // under controll
+            this.setState({
+                value: nextProps.value,
+            });
+
             this.valueDataSource = getValueDataSource(
                 nextProps.value,
                 this.valueDataSource.mapValueDS,
@@ -246,6 +276,12 @@ class Select extends Base {
                 this.dataStore.getMapDS()
             );
         }
+
+        if ('visible' in nextProps) {
+            this.setState({
+                visible: nextProps.visible,
+            });
+        }
     }
 
     componentDidMount() {