Add search clear options; closes #1525

browser/main/TopBar/index.js

@@ -36,6 +36,17 @@ class TopBar extends React.Component {
     ee.off('code:init', this.codeInitHandler)
   }
 
+  handleSearchClearButton (e) {
+    const { router } = this.context
+    this.setState({
+      search: '',
+      isSearching: false
+    })
+    this.refs.search.childNodes[0].blur
+    router.push('/searched')
+    e.preventDefault()
+  }
+
   handleKeyDown (e) {
     // reset states
     this.setState({
@@ -43,6 +54,11 @@ class TopBar extends React.Component {
       isIME: false
     })
 
+    // Clear search on ESC
+    if (e.keyCode === 27) {
+      return this.handleSearchClearButton(e)
+    }
+
     // When the key is an alphabet, del, enter or ctr
     if (e.keyCode <= 90 || e.keyCode >= 186 && e.keyCode <= 222) {
       this.setState({
@@ -114,10 +130,12 @@ class TopBar extends React.Component {
   }
 
   handleOnSearchFocus () {
+    const el = this.refs.search.childNodes[0]
     if (this.state.isSearching) {
-      this.refs.search.childNodes[0].blur()
+      el.blur()
     } else {
-      this.refs.search.childNodes[0].focus()
+      el.focus()
+      el.setSelectionRange(0, el.value.length)
     }
   }
 
@@ -150,15 +168,15 @@ class TopBar extends React.Component {
                 type='text'
                 className='searchInput'
               />
+              {this.state.search !== '' &&
+                <button styleName='control-search-input-clear'
+                  onClick={(e) => this.handleSearchClearButton(e)}
+                >
+                  <i className='fa fa-fw fa-times' />
+                  <span styleName='control-search-input-clear-tooltip'>Clear Search</span>
+                </button>
+              }
             </div>
-            {this.state.search > 0 &&
-              <button styleName='left-search-clearButton'
-                onClick={(e) => this.handleSearchClearButton(e)}
-              >
-                <i className='fa fa-times' />
-              </button>
-            }
-
           </div>
         </div>
         {location.pathname === '/trashed' ? ''