Merge pull request #305 from PolymerElements/composed-contains

Restore focus if the node with focus in the overlay is distributed into it.

Author: bicknellr

iron-overlay-behavior.js

@@ -451,7 +451,7 @@ export const IronOverlayBehaviorImpl = {
         // button outside the overlay).
         var activeElement = this._manager.deepActiveElement;
         if (activeElement === document.body ||
-            dom(this).deepContains(activeElement)) {
+            composedContains(this, activeElement)) {
           this.__restoreFocusNode.focus();
         }
       }
@@ -763,6 +763,18 @@ export const IronOverlayBehaviorImpl = {
 
 };
 
+const composedParent = node =>
+    node.assignedSlot || node.parentNode || node.host;
+
+const composedContains = (ancestor, descendant) => {
+  for (let element = descendant; element; element = composedParent(element)) {
+    if (element === ancestor) {
+      return true;
+    }
+  }
+  return false;
+};
+
 /**
   Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden
   or shown, and displays on top of other content. It includes an optional

test/has-shadow-overlay.js

@@ -0,0 +1,55 @@
+/**
+@license
+Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+import '@polymer/polymer/polymer-legacy.js';
+
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {IronOverlayBehavior} from '../iron-overlay-behavior.js';
+
+const trivialOverlayLocalName =
+    `trivial-overlay-${Math.random().toString(32).substring(2)}`;
+
+Polymer({
+  _template: html`
+    <style>
+      :host {
+        background: white;
+        color: black;
+        border: 1px solid black;
+      }
+    </style>
+
+    <slot></slot>
+  `,
+
+  is: trivialOverlayLocalName,
+  behaviors: [IronOverlayBehavior],
+});
+
+Polymer({
+  _template: html``,
+
+  is: 'has-shadow-overlay',
+
+  attached() {
+    // Set up the shadow root:
+    // ```html
+    // <trivialOverlayLocalName>
+    //   <slot></slot>
+    // </trivialOverlayLocalName>
+    // ```
+    this.overlay = document.createElement(trivialOverlayLocalName);
+    dom(this.overlay).appendChild(document.createElement('slot'));
+    dom(this.root).appendChild(this.overlay);
+  },
+});

test/iron-overlay-behavior.html

@@ -127,6 +127,14 @@ <h2>Focusables (with tabindex)</h2>
     </template>
   </test-fixture>
 
+  <test-fixture id="has-shadow-overlay">
+    <template>
+      <has-shadow-overlay>
+        <button>button</button>
+      </has-shadow-overlay>
+    </template>
+  </test-fixture>
+
   <test-buttons id="buttons"></test-buttons>
   <input id="focusInput" placeholder="focus input">
 
@@ -136,6 +144,7 @@ <h2>Focusables (with tabindex)</h2>
     import './test-overlay2.js';
     import './test-buttons.js';
     import './test-menu-button.js';
+    import './has-shadow-overlay.js';
 
     import {dom, flush} from '@polymer/polymer/lib/legacy/polymer.dom.js';
     import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
@@ -984,6 +993,38 @@ <h2>Focusables (with tabindex)</h2>
         });
       });
 
+      test(
+          'overlay returns focus on close (distributed focusable content)',
+          function(done) {
+            var hasShadowOverlay = fixture('has-shadow-overlay');
+            hasShadowOverlay.overlay.restoreFocusOnClose = true;
+
+            var button = dom(hasShadowOverlay).querySelector('button');
+
+            var focusable = document.getElementById('focusInput');
+            focusable.focus();
+
+            runAfterOpen(hasShadowOverlay.overlay, async function() {
+              button.focus();
+              assert.equal(
+                  IronOverlayManager.deepActiveElement,
+                  button,
+                  'the distributed content is focused');
+
+              runAfterClose(hasShadowOverlay.overlay, async function() {
+                // Focus should be restored to the input even though the
+                // focused button inside the overlay was not a shadow-including
+                // descendant of the overlay.
+                assert.equal(
+                    IronOverlayManager.deepActiveElement,
+                    focusable,
+                    'focus restored to focusable');
+
+                done();
+              });
+            });
+          });
+
       test('avoids restoring focus if focus changed', function(done) {
         var button0 = document.getElementById('buttons').$.button0;
         var button1 = document.getElementById('buttons').$.button1;