fix clear

ant-design · Apr 27, 2017 · ea4087e · ea4087e
1 parent 3b36ae0
commit ea4087e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/components/input-item/Input.web.tsx b/components/input-item/Input.web.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import omit from 'omit.js';
 
 class Input extends React.Component<any, any> {
-  debounceTimeout: any;
   scrollIntoViewTimeout: any;
 
   constructor(props) {
@@ -27,10 +26,6 @@ class Input extends React.Component<any, any> {
   }
 
   componentWillUnmount() {
-    if (this.debounceTimeout) {
-      clearTimeout(this.debounceTimeout);
-      this.debounceTimeout = null;
-    }
     if (this.scrollIntoViewTimeout) {
       clearTimeout(this.scrollIntoViewTimeout);
       this.scrollIntoViewTimeout = null;
@@ -44,11 +39,6 @@ class Input extends React.Component<any, any> {
   }
 
   onInputBlur = (e) => {
-    this.debounceTimeout = setTimeout(() => {
-      this.setState({
-        focus: false,
-      });
-    }, 200);
     if (!('focused' in this.props)) {
       this.setState({
         focused: false,
@@ -61,20 +51,12 @@ class Input extends React.Component<any, any> {
   }
 
   onInputFocus = (e) => {
-    if (this.debounceTimeout) {
-      clearTimeout(this.debounceTimeout);
-      this.debounceTimeout = null;
-    }
     if (!('focused' in this.props)) {
       this.setState({
         focused: true,
       });
     }
 
-    this.setState({
-      focus: true,
-    });
-
     const value = e.target.value;
     if (this.props.onFocus) {
       this.props.onFocus(value);

diff --git a/components/input-item/index.web.tsx b/components/input-item/index.web.tsx
@@ -34,6 +34,8 @@ class InputItem extends React.Component<InputItemProps, any> {
     updatePlaceholder: false,
   };
 
+  debounceTimeout: any;
+
   constructor(props) {
     super(props);
     this.state = {
@@ -49,6 +51,13 @@ class InputItem extends React.Component<InputItemProps, any> {
     }
   }
 
+  componentWillUnmount() {
+    if (this.debounceTimeout) {
+      clearTimeout(this.debounceTimeout);
+      this.debounceTimeout = null;
+    }
+  }
+
   onInputChange = (e) => {
     let value = e.target.value;
     const { onChange, type } = this.props;
@@ -81,6 +90,30 @@ class InputItem extends React.Component<InputItemProps, any> {
     }
   }
 
+  onInputFocus = (value) => {
+    if (this.debounceTimeout) {
+      clearTimeout(this.debounceTimeout);
+      this.debounceTimeout = null;
+    }
+    this.setState({
+      focus: true,
+    });
+    if (this.props.onFocus) {
+      this.props.onFocus(value);
+    }
+  }
+
+  onInputBlur = (value) => {
+    this.debounceTimeout = setTimeout(() => {
+      this.setState({
+        focus: false,
+      });
+    }, 200);
+    if (this.props.onBlur) {
+      this.props.onBlur(value);
+    }
+  }
+
   onExtraClick = (e) => {
     if (this.props.onExtraClick) {
       this.props.onExtraClick(e);
@@ -182,6 +215,8 @@ class InputItem extends React.Component<InputItemProps, any> {
             name={name}
             placeholder={placeholder}
             onChange={this.onInputChange}
+            onFocus={this.onInputFocus}
+            onBlur={this.onInputBlur}
             readOnly={!editable}
             disabled={disabled}
           />