fix clear button

react-component · Apr 28, 2016 · 1567bf6 · 1567bf6
1 parent b65e4f3
commit 1567bf6
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 23 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,5 +1,10 @@
 # History
 ----
+
+## 6.3.0 / 2016-04-28
+
+- support onBlur
+
 ## 6.2.0 / 2016-04-20
 
 - remove searchPlaceholder

diff --git a/examples/single.js b/examples/single.js
@@ -20,6 +20,7 @@ const Test = React.createClass({
     } else {
       value = e;
     }
+    console.log('onChange', value);
     this.setState({
       value,
     });
@@ -31,6 +32,10 @@ const Test = React.createClass({
     });
   },
 
+  onBlur(v) {
+    console.log('onBlur', v);
+  },
+
   render() {
     if (this.state.destroy) {
       return null;
@@ -47,6 +52,7 @@ const Test = React.createClass({
             placeholder="placeholder"
             dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
             style={{ width: 500 }}
+            onBlur={this.onBlur}
             allowClear
             optionLabelProp="children"
             optionFilterProp="text"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-select",
-  "version": "6.2.3",
+  "version": "6.3.0",
   "description": "React Select",
   "keywords": [
     "react",

diff --git a/src/Select.jsx b/src/Select.jsx
@@ -44,6 +44,7 @@ const Select = React.createClass({
     animation: PropTypes.string,
     choiceTransitionName: PropTypes.string,
     onChange: PropTypes.func,
+    onBlur: PropTypes.func,
     onSelect: PropTypes.func,
     onSearch: PropTypes.func,
     placeholder: PropTypes.any,
@@ -69,6 +70,7 @@ const Select = React.createClass({
       placeholder: '',
       defaultValue: [],
       onChange: noop,
+      onBlur: noop,
       onSelect: noop,
       onSearch: noop,
       onDeselect: noop,
@@ -136,6 +138,7 @@ const Select = React.createClass({
   },
 
   componentWillUnmount() {
+    this.clearBlurTime();
     if (this.dropdownContainer) {
       ReactDOM.unmountComponentAtNode(this.dropdownContainer);
       document.body.removeChild(this.dropdownContainer);
@@ -282,6 +285,7 @@ const Select = React.createClass({
   },
 
   onOuterFocus() {
+    this.clearBlurTime();
     this._focused = true;
     this.updateFocusClassName();
   },
@@ -292,22 +296,27 @@ const Select = React.createClass({
   },
 
   onOuterBlur() {
-    this._focused = false;
-    this.updateFocusClassName();
-    const props = this.props;
-    if (isSingleMode(props) && props.showSearch &&
-      this.state.inputValue && props.defaultActiveFirstOption) {
-      const options = this._options || [];
-      if (options.length) {
-        const firstOption = findFirstMenuItem(options);
-        if (firstOption) {
-          this.fireChange([{
-            key: firstOption.key,
-            label: this.getLabelFromOption(firstOption),
-          }]);
+    this.blurTimer = setTimeout(() => {
+      this._focused = false;
+      this.updateFocusClassName();
+      const props = this.props;
+      let { value } = this.state;
+      if (isSingleMode(props) && props.showSearch &&
+        this.state.inputValue && props.defaultActiveFirstOption) {
+        const options = this._options || [];
+        if (options.length) {
+          const firstOption = findFirstMenuItem(options);
+          if (firstOption) {
+            value = [{
+              key: firstOption.key,
+              label: this.getLabelFromOption(firstOption),
+            }];
+            this.fireChange(value);
+          }
         }
       }
-    }
+      props.onBlur(this.getVLForOnChange(value));
+    }, 10);
   },
 
   onClearSelection(event) {
@@ -318,11 +327,15 @@ const Select = React.createClass({
     }
     event.stopPropagation();
     if (state.inputValue || state.value.length) {
-      this.fireChange([]);
-      this.setOpenState(false);
-      this.setState({
-        inputValue: '',
-      });
+      if (this.state.value.length) {
+        this.fireChange([]);
+      }
+      this.setOpenState(false, true);
+      if (this.state.inputValue) {
+        this.setState({
+          inputValue: '',
+        });
+      }
     }
   },
 
@@ -457,7 +470,12 @@ const Select = React.createClass({
       }
     });
   },
-
+  clearBlurTime() {
+    if (this.blurTimer) {
+      clearTimeout(this.blurTimer);
+      this.blurTimer = null;
+    }
+  },
   updateFocusClassName() {
     const { refs, props } = this;
     // avoid setState and its side effect
@@ -677,11 +695,17 @@ const Select = React.createClass({
       [`${prefixCls}-enabled`]: !disabled,
       [`${prefixCls}-allow-clear`]: !!props.allowClear,
     };
-
+    const clearStyle = {
+      ...UNSELECTABLE_STYLE,
+      display: 'none',
+    };
+    if (this.state.inputValue || this.state.value.length) {
+      clearStyle.display = 'block';
+    }
     const clear = (<span
       key="clear"
       onMouseDown={preventDefaultEvent}
-      style={UNSELECTABLE_STYLE}
+      style={clearStyle}
       {...UNSELECTABLE_ATTRIBUTE}
       className={`${prefixCls}-selection__clear`}
       onClick={this.onClearSelection}