Fix search bar (#1621)

* fix #1609 * update search-bar doc * optimize code * optimize code
ant-design · Jul 28, 2017 · 940dc0c · 940dc0c
1 parent e7e1809
commit 940dc0c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/components/search-bar/index.en-US.md b/components/search-bar/index.en-US.md
@@ -29,7 +29,7 @@ Properties | Descrition | Type | Default
 | cancelText  |  Customize the text of the `Cancel` button   | String |  `取消`  |
 | disabled    |   Set disabled  | bool |  `false`  |
 | onClear(`web only`)  |  Click the clear icon to trigger   | (val: string): void |    |
-| autoFocus(`web only`)   | When the page is initialized, SearchBar automatically gets the cursor, and each page has only one SearchBar's autoFocus to take effect (Not guaranteed to be compatible with all browsers) | bool | false  |
+| autoFocus(`web only`)   | When the page is initialized, SearchBar automatically gets the cursor, and each page has only one SearchBar's autoFocus to take effect (Not guaranteed to be compatible with all browsers, Now only Alipay support the feature) | bool | false  |
 | focused(`web only`) | Manual focus on SearchBar (After `focused` is set to true, you need to set this property to false again on `onFocus` or `onBlur` event) | bool | false  |
 
 Note: RN version more API please refer to [http://facebook.github.io/react-native/docs/textinput.html](http://facebook.github.io/react-native/docs/textinput.html)
diff --git a/components/search-bar/index.web.tsx b/components/search-bar/index.web.tsx
@@ -152,9 +152,15 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
     }
     // 加上setTimeout 为了解决Android的兼容性问题。
     // https://github.com/ant-design/ant-design-mobile/issues/1341
-    setTimeout(() => {
-      (this.refs as any).searchInput.focus();
-    }, 0);
+    // 只有支付宝系客户端才完美支持
+    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);
+    }
   }
 
   onCancel = () => {
@@ -163,7 +169,6 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
     } else {
       this.onClear();
     }
-    (this.refs as any).searchInput.blur();
   }
 
   render() {

diff --git a/components/search-bar/index.zh-CN.md b/components/search-bar/index.zh-CN.md
@@ -30,7 +30,7 @@ subtitle: 搜索栏
 | cancelText    |   定制`取消`按钮的文字     | String |  `取消`  |
 | disabled    |  设置禁用   | bool |  `false`  |
 | onClear(`web only`)    |    点击 clear 图标触发  | (val: string): void |    |
-| autoFocus(`web only`)   | 页面初始化时`SearchBar`自动获取光标, 每个页面只有一个`SearchBar`的`autoFocus`会生效 (不保证兼容所有浏览器) | bool | false  |
+| autoFocus(`web only`)   | 页面初始化时`SearchBar`自动获取光标, 每个页面只有一个`SearchBar`的`autoFocus`会生效 (不保证兼容所有浏览器，目前只支付宝客户端支持) | bool | false  |
 | focused(`web only`)   | 手动聚焦 SearchBar (在`focused`设置为 true 后，需要在`onFocus`或者`onBlur`时再次将该属性设置为 false ) | bool | false  |
 
 注：RN 版本更多 API 请参考 [http://facebook.github.io/react-native/docs/textinput.html](http://facebook.github.io/react-native/docs/textinput.html)