Settings and History: Track when items are blurred

When the tab index for the parent element is never set to -1, if focus
leaves the list of items and then returns to it, the focus will
automatically target the most recently focused control. Instead, if
focus leaves the list, focus should return to the first control on the
most recently focused item.

Bug: 896624
Change-Id: I0e33e099f3b15b840d942d23fdccd620810b0806
Reviewed-on: https://chromium-review.googlesource.com/c/1336657
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608562}

chrome/browser/resources/md_history/history_item.js

@@ -131,6 +131,9 @@ cr.define('md_history', function() {
     /** @private {boolean} */
     isShiftKeyDown_: false,
 
+    /** @private {boolean} */
+    blurred_: false,
+
     /** @override */
     attached: function() {
       Polymer.RenderStatus.afterNextRender(this, function() {
@@ -141,6 +144,7 @@ cr.define('md_history', function() {
         // Adding listeners asynchronously to reduce blocking time, since these
         // history items are items in a potentially long list.
         this.listen(this, 'focus', 'onFocus_');
+        this.listen(this, 'blur', 'onBlur_');
         this.listen(this, 'dom-change', 'onDomChange_');
         this.listen(this.$.checkbox, 'keydown', 'onCheckboxKeydown_');
       });
@@ -165,10 +169,22 @@ cr.define('md_history', function() {
       if (this.mouseDown_)
         return;
 
-      if (this.lastFocused)
+      if (this.lastFocused && !this.blurred_)
         this.row_.getEquivalentElement(this.lastFocused).focus();
       else
         this.row_.getFirstFocusable().focus();
+      this.blurred_ = false;
+    },
+
+    /**
+     * @param {!Event} e
+     * @private
+     */
+    onBlur_: function(e) {
+      const node =
+          e.relatedTarget ? /** @type {!Node} */ (e.relatedTarget) : null;
+      if (!this.parentNode.contains(node))
+        this.blurred_ = true;
     },
 
     /** @param {!KeyboardEvent} e */

chrome/browser/resources/settings/focus_row_behavior.js

@@ -87,6 +87,9 @@ const FocusRowBehavior = {
     },
   },
 
+  /** @private {boolean} */
+  blurred_: false,
+
   /** @private {?Element} */
   firstControl_: null,
 
@@ -226,12 +229,13 @@ const FocusRowBehavior = {
       return;
     }
 
-    if (this.lastFocused) {
+    if (this.lastFocused && !this.blurred_) {
       this.row_.getEquivalentElement(this.lastFocused).focus();
     } else {
       const firstFocusable = assert(this.firstControl_);
       firstFocusable.focus();
     }
+    this.blurred_ = false;
   },
 
   /** @param {!KeyboardEvent} e */
@@ -251,8 +255,16 @@ const FocusRowBehavior = {
     this.mouseFocused_ = true;  // Set flag to not do any control-focusing.
   },
 
-  /** @private */
-  onBlur_: function() {
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onBlur_: function(e) {
     this.mouseFocused_ = false;  // Reset flag since it's not active anymore.
-  }
+
+    const node =
+        e.relatedTarget ? /** @type {!Node} */ (e.relatedTarget) : null;
+    if (!this.parentNode.contains(node))
+      this.blurred_ = true;
+  },
 };