fix searchBar onClear #1721 (#1731)

* fix searchBar onClear #1721 * optimize code * remove unused comment * modify changelog
ant-design · Aug 28, 2017 · 42003c4 · 42003c4
1 parent 7fedf89
commit 42003c4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -13,6 +13,10 @@ timeline: true
 * Major version release is not included in this schedule for breadking change and new features.
 
 ---
+
+- **Bug fix**
+  - Fix `SeachBar` in specific Client when `onClear` event was triggered, the `SearchBar` can't be auto focused. ([#1721](https://github.com/ant-design/ant-design-mobile/issues/1721))
+
 ## 1.6.3
 
 `2017-08-15`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -15,6 +15,10 @@ timeline: true
 ---
 
 
+## 1.6.4
+
+- **Bug fix**
+  - 修复 `SeachBar` 在特定客户端内`onClear`事件触发时无法自动`focus`到搜索栏的问题。([#1721](https://github.com/ant-design/ant-design-mobile/issues/1721))
 
 ## 1.6.3
 

diff --git a/components/search-bar/index.web.tsx b/components/search-bar/index.web.tsx
@@ -9,6 +9,8 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
   rightBtnInitMarginleft: any;
   firstFocus: any;
   scrollIntoViewTimeout: any;
+  blurFromOnClear: any;
+  onBlurTimeout: any;
 
   constructor(props) {
     super(props);
@@ -31,7 +33,7 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
     const initBtn = window.getComputedStyle(this.refs.rightBtn);
     this.rightBtnInitMarginleft = initBtn['margin-left'];
     if ((this.props.autoFocus || this.state.focused) && navigator.userAgent.indexOf('AlipayClient') > 0) {
-      (this.refs as any).searchInput.focus();
+      this.refs.searchInput.focus();
     }
     this.componentDidUpdate();
   }
@@ -52,7 +54,7 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
       }
     }
     if (this.state.focused) {
-      (this.refs as any).searchInput.focus();
+      this.refs.searchInput.focus();
     }
   }
 
@@ -74,14 +76,18 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
       clearTimeout(this.scrollIntoViewTimeout);
       this.scrollIntoViewTimeout = null;
     }
+    if (this.onBlurTimeout) {
+      clearTimeout(this.onBlurTimeout);
+      this.onBlurTimeout = null;
+    }
   }
 
   onSubmit = (e) => {
     e.preventDefault();
     if (this.props.onSubmit) {
       this.props.onSubmit(this.state.value);
     }
-    (this.refs as any).searchInput.blur();
+    this.refs.searchInput.blur();
   }
 
   onChange = (e) => {
@@ -125,11 +131,14 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
   }
 
   onBlur = () => {
-    setTimeout(() => {
-      this.setState({
-        focus: false,
-      });
-    }, 0);
+    this.onBlurTimeout = setTimeout(() => {
+      if (!this.blurFromOnClear) {
+        this.setState({
+          focus: false,
+        });
+      }
+      this.blurFromOnClear = false;
+    }, 50);
     if (!('focused' in this.props)) {
       this.setState({
         focused: false,
@@ -141,6 +150,8 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
   }
 
   onClear = () => {
+    this.blurFromOnClear = true;
+
     if (!('value' in this.props)) {
       this.setState({ value: '' });
     }
@@ -150,17 +161,7 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
     if (this.props.onChange) {
       this.props.onChange('');
     }
-    // 加上setTimeout 为了解决Android的兼容性问题。
-    // https://github.com/ant-design/ant-design-mobile/issues/1341
-    // 只有支付宝系客户端才完美支持
-    const ua = navigator.userAgent;
-    if (ua.indexOf('AlipayClient') > 0 && (ua.match(/Android/i) || ua.indexOf('AliApp(AM') < 0)) {
-      // 口碑掌柜iOS 只有5.2以上版本才支持
-      setTimeout(() => {
-        (this.refs as any).searchInput.focus();
-        this.componentDidUpdate();
-      }, 300);
-    }
+    this.refs.searchInput.focus();
   }
 
   onCancel = () => {