WebUI: FocusRowBehavior, focus on equivalent control only if up/down was pressed

Bug: 901771
Change-Id: Iea4fa9e711024f7f78ac363ed652b350e953e17a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1544978Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#646951}

chrome/test/data/webui/cr_focus_row_behavior_test.js

@@ -90,6 +90,8 @@ suite('cr-focus-row-behavior-test', function() {
     const lastButton = document.createElement('button');
     lastButton.setAttribute('focus-type', 'fake-btn-two');
     testElement.lastFocused = lastButton;
+    MockInteractions.pressAndReleaseKeyOn(
+        testElement.$.control, '', null, 'ArrowDown');
 
     let focused = false;
     testElement.$.controlTwo.addEventListener('focus', function() {
@@ -117,6 +119,8 @@ suite('cr-focus-row-behavior-test', function() {
     const lastButton = document.createElement('button');
     lastButton.setAttribute('focus-type', 'fake-btn-three');
     testElement.lastFocused = lastButton;
+    MockInteractions.pressAndReleaseKeyOn(
+        testElement.$.control, '', null, 'ArrowDown');
 
     const wait = test_util.eventToPromise('focus', testElement);
     testElement.fire('focus');

ui/webui/resources/js/cr/ui/focus_row_behavior.js

@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 
 cr.define('cr.ui', function() {
+  /** @type {string} */
+  let lastKeyDownKey = '';
+
   /** @implements {cr.ui.FocusRowDelegate} */
   class FocusRowBehaviorDelegate {
     /**
@@ -136,6 +139,7 @@ cr.define('cr.ui', function() {
         this.listen(this, 'dom-change', 'addItems_');
         this.listen(this, 'mousedown', 'onMouseDown_');
         this.listen(this, 'blur', 'onBlur_');
+        this.listen(this, 'keydown', 'onKeydown_');
       });
     },
 
@@ -145,6 +149,7 @@ cr.define('cr.ui', function() {
       this.unlisten(this, 'dom-change', 'addItems_');
       this.unlisten(this, 'mousedown', 'onMouseDown_');
       this.unlisten(this, 'blur', 'onBlur_');
+      this.unlisten(this, 'keydown', 'onKeydown_');
       this.removeObservers_();
       if (this.firstControl_) {
         this.unlisten(this.firstControl_, 'keydown', 'onFirstControlKeydown_');
@@ -275,11 +280,11 @@ cr.define('cr.ui', function() {
       const restoreFocusToFirst =
           this.listBlurred && e.composedPath()[0] === this;
 
-      if (this.lastFocused && !restoreFocusToFirst) {
-        this.row_.getEquivalentElement(this.lastFocused).focus();
-      } else {
+      if (!this.lastFocused || restoreFocusToFirst) {
         const firstFocusable = assert(this.firstControl_);
         firstFocusable.focus();
+      } else if (lastKeyDownKey == 'ArrowDown' || lastKeyDownKey == 'ArrowUp') {
+        this.row_.getEquivalentElement(this.lastFocused).focus();
       }
       this.listBlurred = false;
     },
@@ -291,6 +296,11 @@ cr.define('cr.ui', function() {
       }
     },
 
+    /** @param {!KeyboardEvent} e */
+    onKeydown_: function(e) {
+      lastKeyDownKey = e.key;
+    },
+
     /** @private */
     ironListTabIndexChanged_: function() {
       if (this.row_) {