Merge pull request #3219 from weseek/fix/behavior-of-link-edit-modal-detail

Fix/behavior of reset button in link edit modal detail

src/client/js/components/PageEditor/LinkEditModal.jsx

@@ -298,6 +298,7 @@ class LinkEditModal extends React.PureComponent {
                 inputName="link"
                 placeholder="Input page path or URL"
                 keywordOnInit={this.state.linkInputValue}
+                behaviorOfResetBtn="clear"
               />
               <div className="d-none d-sm-block input-group-append">
                 <button type="button" id="preview-btn" className="btn btn-info btn-page-preview">

src/client/js/components/SearchTypeahead.jsx

@@ -24,12 +24,14 @@ class SearchTypeahead extends React.Component {
     };
 
     this.restoreInitialData = this.restoreInitialData.bind(this);
+    this.clearKeyword = this.clearKeyword.bind(this);
+    this.changeKeyword = this.changeKeyword.bind(this);
     this.search = this.search.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
     this.dispatchSubmit = this.dispatchSubmit.bind(this);
     this.getEmptyLabel = this.getEmptyLabel.bind(this);
-    this.getRestoreFormButton = this.getRestoreFormButton.bind(this);
+    this.getResetFormButton = this.getResetFormButton.bind(this);
     this.renderMenuItemChildren = this.renderMenuItemChildren.bind(this);
     this.getTypeahead = this.getTypeahead.bind(this);
   }
@@ -51,11 +53,24 @@ class SearchTypeahead extends React.Component {
   }
 
   /**
-   * Initialize keyword
+   * Initialize keywordyword
    */
   restoreInitialData() {
+    this.changeKeyword(this.props.keywordOnInit);
+  }
+
+  /**
+   * clear keyword
+   */
+  clearKeyword(text) {
+    this.changeKeyword('');
+  }
+
+  /**
+   * change keyword
+   */
+  changeKeyword(text) {
     // see https://github.com/ericgio/react-bootstrap-typeahead/issues/266#issuecomment-414987723
-    const text = this.props.keywordOnInit;
     const instance = this.typeahead.getInstance();
     instance.clear();
     instance.setState({ text });
@@ -149,11 +164,16 @@ class SearchTypeahead extends React.Component {
   /**
    * Get restore form button to initialize button
    */
-  getRestoreFormButton() {
-    const isHidden = (this.state.input === this.props.keywordOnInit);
-
-    return isHidden ? <span /> : (
-      <button type="button" className="btn btn-link search-clear" onMouseDown={this.restoreInitialData}>
+  getResetFormButton() {
+    const isClearBtn = this.props.behaviorOfResetBtn === 'clear';
+    const initialKeyword = isClearBtn ? '' : this.props.keywordOnInit;
+    const isHidden = this.state.input === initialKeyword;
+    const resetForm = isClearBtn ? this.clearKeyword : this.restoreInitialData;
+
+    return isHidden ? (
+      <span />
+    ) : (
+      <button type="button" className="btn btn-link search-clear" onMouseDown={resetForm}>
         <i className="icon-close" />
       </button>
     );
@@ -179,7 +199,7 @@ class SearchTypeahead extends React.Component {
       inputProps.name = this.props.inputName;
     }
 
-    const restoreFormButton = this.getRestoreFormButton();
+    const resetFormButton = this.getResetFormButton();
 
     return (
       <div className="search-typeahead">
@@ -203,7 +223,7 @@ class SearchTypeahead extends React.Component {
           caseSensitive={false}
           defaultSelected={defaultSelected}
         />
-        {restoreFormButton}
+        {resetFormButton}
       </div>
     );
   }
@@ -232,6 +252,7 @@ SearchTypeahead.propTypes = {
   placeholder:     PropTypes.string,
   keywordOnInit:   PropTypes.string,
   helpElement:     PropTypes.object,
+  behaviorOfResetBtn: PropTypes.oneOf(['restore', 'clear']),
 };
 
 /**
@@ -243,6 +264,7 @@ SearchTypeahead.defaultProps = {
   onChange:        noop,
   placeholder:     '',
   keywordOnInit:   '',
+  behaviorOfResetBtn: 'restore',
   onInputChange: () => {},
 };