Files app: Change the search box collapse to focusout event

Change from click event to focusout event so it works for keyboard TAB
key too.

The fix is the following:
1. Listen to 'focusout' event within the whole search box.
2. Use requestAnimantionFrame() to give a chance to clicking on buttons
on the left of the search box to receive the click event before the
collapse.
3. Only collpase if the focus moved out of the whole search box.

This also fixes issue:1058547.

Test: browser_tests --gtest_filter="*searchHidingTextEntryField*"
Bug: 1059016, 1058547
Change-Id: I4ad6441d1400e7de629bc6619a3eb69c88b29d50
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2097775
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Alex Danilo <adanilo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749073}

ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js

@@ -170,10 +170,6 @@ class FileManagerUI {
         queryRequiredElement('#search-box', this.element),
         queryRequiredElement('#search-wrapper', this.element),
         queryRequiredElement('#search-button', this.element));
-    // Add a listener to the dialog container for hiding the search box.
-    this.dialogContainer.addEventListener('click', (event) => {
-      this.searchBox.removeHidePending(event);
-    }, true);
 
     /**
      * Empty folder UI.

ui/file_manager/file_manager/foreground/js/ui/search_box.js

@@ -79,6 +79,9 @@ class SearchBox extends cr.EventTarget {
     this.autocompleteList.handleEnterKeydown = dispatchItemSelect;
     this.autocompleteList.addEventListener('mousedown', dispatchItemSelect);
 
+    this.searchWrapper.addEventListener(
+        'focusout', this.onFocusOut_.bind(this));
+
     // Append dynamically created element.
     element.parentNode.appendChild(this.autocompleteList);
   }
@@ -100,6 +103,21 @@ class SearchBox extends cr.EventTarget {
     this.searchButton.hidden = hidden;
   }
 
+  /**
+   * Focus out event handler.
+   * @private
+   */
+  onFocusOut_() {
+    window.requestAnimationFrame(() => {
+      // If the focus is still within the search box don't hide the input.
+      if (document.activeElement &&
+          this.searchWrapper.contains(document.activeElement)) {
+        return;
+      }
+      this.removeHidePending();
+    });
+  }
+
   /**
    * @private
    */
@@ -142,22 +160,11 @@ class SearchBox extends cr.EventTarget {
 
   /**
    * Handles delayed hiding of the search box (until click).
-   * @param {Event} event
    */
-  removeHidePending(event) {
-    if (this.element.classList.contains('hide-pending')) {
-      // If the search box was waiting to hide, but we clicked on it, don't.
-      if (event.target === this.inputElement) {
-        this.element.classList.toggle('hide-pending', false);
-        this.searchWrapper.classList.toggle('hide-pending', false);
-        this.onFocus_();
-      } else {
-        // When input has any text we keep it displayed with current search.
-        this.inputElement.disabled = this.inputElement.value.length == 0;
-        this.element.classList.toggle('hide-pending', false);
-        this.searchWrapper.classList.toggle('hide-pending', false);
-      }
-    }
+  removeHidePending() {
+    this.inputElement.disabled = this.inputElement.value.length == 0;
+    this.element.classList.toggle('hide-pending', false);
+    this.searchWrapper.classList.toggle('hide-pending', false);
   }
 
   /**