[footer] Enable arrow keys for closed select

CL:2201336 swaps out the native <select> control for a <div> that
implements the same functionality so that it can be styled for files-ng.

Add keyboard navigation when the control is collapsed to allow changing
the filtered options without expanding the control.

Fires a change event if the selection is changed with the control closed
so that the filtered name gets updated correctly.

Bug: 1097454, 1002410
Change-Id: Ic2e8c06ef309e4cd1090dc9a48622bf92c7e3666
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2282829
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#786167}

ui/file_manager/file_manager/foreground/js/ui/dialog_footer.js

@@ -214,24 +214,29 @@ class DialogFooter {
         break;
       case 'ArrowDown':
       case 'ArrowUp':
-        if (options.getAttribute('expanded') === 'expanded') {
-          const selectedItem = options.querySelector('.selected');
-          if (selectedItem) {
-            if (evt.key === 'ArrowDown') {
-              if (selectedItem.nextSibling) {
-                this.setOptionSelected(
-                    /** @type {HTMLOptionElement} */ (
-                        selectedItem.nextSibling));
-              }
-            } else {  // ArrowUp.
-              if (selectedItem.previousSibling) {
-                this.setOptionSelected(
-                    /** @type {HTMLOptionElement} */ (
-                        selectedItem.previousSibling));
-              }
+        const selectedItem = options.querySelector('.selected');
+        let selectionChanged = false;
+        if (selectedItem) {
+          if (evt.key === 'ArrowDown') {
+            if (selectedItem.nextSibling) {
+              this.setOptionSelected(
+                  /** @type {HTMLOptionElement} */ (selectedItem.nextSibling));
+              selectionChanged = true;
+            }
+          } else {  // ArrowUp.
+            if (selectedItem.previousSibling) {
+              this.setOptionSelected(
+                  /** @type {HTMLOptionElement} */ (
+                      selectedItem.previousSibling));
+              selectionChanged = true;
             }
           }
         }
+        if (selectionChanged &&
+            options.getAttribute('expanded') !== 'expanded') {
+          const changeEvent = new Event('change');
+          this.fileTypeSelector.dispatchEvent(changeEvent);
+        }
         break;
     }
   }