diff --git a/src/components/GlobalHeader/index.less b/src/components/GlobalHeader/index.less
index 52f5ed4f6e5a45ff2354d1d6bc79cee7f60100ec..dc20776060155304f118f1eb882f1168f69d89a0 100644
--- a/src/components/GlobalHeader/index.less
+++ b/src/components/GlobalHeader/index.less
@@ -48,6 +48,7 @@ i.trigger {
 .right {
   float: right;
   height: 100%;
+  overflow: hidden;
   .action {
     cursor: pointer;
     padding: 0 12px;
diff --git a/src/components/HeaderSearch/index.d.ts b/src/components/HeaderSearch/index.d.ts
index 28e56cc0bce138be55f772443d9ba52095c32631..278791437b47c61b99501b9f0374aee58374dd38 100644
--- a/src/components/HeaderSearch/index.d.ts
+++ b/src/components/HeaderSearch/index.d.ts
@@ -2,8 +2,11 @@ import * as React from 'react';
 export interface IHeaderSearchProps {
   placeholder?: string;
   dataSource?: string[];
+  defaultOpen: boolean;
+  open: boolean;
   onSearch?: (value: string) => void;
   onChange?: (value: string) => void;
+  onVisibleChange?: (visible: boolean) => void;
   onPressEnter?: (value: string) => void;
   style?: React.CSSProperties;
   className?: string;
diff --git a/src/components/HeaderSearch/index.en-US.md b/src/components/HeaderSearch/index.en-US.md
new file mode 100644
index 0000000000000000000000000000000000000000..a1cf841ffa6b484ec553a76284fa784d6de6df8d
--- /dev/null
+++ b/src/components/HeaderSearch/index.en-US.md
@@ -0,0 +1,23 @@
+---
+title:
+  en-US: HeaderSearch
+  zh-CN: HeaderSearch
+subtitle: Top search box
+cols: 1
+order: 8
+---
+
+Usually placed as an entry to the global search, placed on the right side of the navigation toolbar.
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+placeholder | placeholder text | string | -
+dataSource | current list of prompts | string[] | -
+onSearch | Callback when selecting an item or pressing Enter | function(value) | -
+onChange | Enter a callback for the search text | function(value) | -
+onPressEnter | Callback when pressing Enter | function(value) | -
+onVisibleChange | Show or hide the callback of the text box | function(value) |-
+defaultOpen | The input box is displayed for the first time. | boolean | false
+open | The input box is displayed | booelan |false
\ No newline at end of file
diff --git a/src/components/HeaderSearch/index.js b/src/components/HeaderSearch/index.js
index ebc9ae701f41f576f860c3343b3d2b7862616738..dbcabbc9c15d231c5e73780e97856f1a3212dc43 100644
--- a/src/components/HeaderSearch/index.js
+++ b/src/components/HeaderSearch/index.js
@@ -15,6 +15,7 @@ export default class HeaderSearch extends PureComponent {
     defaultActiveFirstOption: PropTypes.bool,
     dataSource: PropTypes.array,
     defaultOpen: PropTypes.bool,
+    onVisibleChange: PropTypes.func,
   };
 
   static defaultProps = {
@@ -25,8 +26,18 @@ export default class HeaderSearch extends PureComponent {
     placeholder: '',
     dataSource: [],
     defaultOpen: false,
+    onVisibleChange: () => {},
   };
 
+  static getDerivedStateFromProps(props) {
+    if ('open' in props) {
+      return {
+        searchMode: props.open,
+      };
+    }
+    return null;
+  }
+
   constructor(props) {
     super(props);
     this.state = {
@@ -64,6 +75,8 @@ export default class HeaderSearch extends PureComponent {
         this.input.focus();
       }
     });
+    const { onVisibleChange } = this.props;
+    onVisibleChange(true);
   };
 
   leaveSearchMode = () => {
@@ -86,14 +99,25 @@ export default class HeaderSearch extends PureComponent {
   }
 
   render() {
-    const { className, placeholder, ...restProps } = this.props;
+    const { className, placeholder, open, ...restProps } = this.props;
     const { searchMode, value } = this.state;
     delete restProps.defaultOpen; // for rc-select not affected
     const inputClass = classNames(styles.input, {
       [styles.show]: searchMode,
     });
     return (
-      <span className={classNames(className, styles.headerSearch)} onClick={this.enterSearchMode}>
+      <span
+        className={classNames(className, styles.headerSearch)}
+        onClick={this.enterSearchMode}
+        onTransitionEnd={({ propertyName }) => {
+          if (propertyName === 'width') {
+            if (!searchMode) {
+              const { onVisibleChange } = this.props;
+              onVisibleChange(searchMode);
+            }
+          }
+        }}
+      >
         <Icon type="search" key="Icon" />
         <AutoComplete
           key="AutoComplete"
diff --git a/src/components/HeaderSearch/index.md b/src/components/HeaderSearch/index.zh-CN.md
similarity index 73%
rename from src/components/HeaderSearch/index.md
rename to src/components/HeaderSearch/index.zh-CN.md
index 3d4d3c222d92ed7de315fe88a0268ac94e9936b2..a9a047547505414a0f3ea970d4c1a4735ad185b0 100644
--- a/src/components/HeaderSearch/index.md
+++ b/src/components/HeaderSearch/index.zh-CN.md
@@ -18,4 +18,6 @@ dataSource | 当前提示内容列表 | string[] | -
 onSearch | 选择某项或按下回车时的回调 | function(value) | -
 onChange | 输入搜索字符的回调 | function(value) | -
 onPressEnter | 按下回车时的回调 | function(value) | -
-defaultOpen | 输入框首次显示是否打开 | boolean | false
+onVisibleChange | 显示或隐藏文本框的回调 | function(value) |-
+defaultOpen | 输入框首次显示是否显示  | boolean | false
+open | 控制输入框是否显示 | booelan |false
\ No newline at end of file