fix(overlays): trapsKeyboardFocus should work with contentNode

Author: gerjanvangeest

packages/overlays/src/LocalOverlayController.js

@@ -15,24 +15,48 @@ export class LocalOverlayController {
     this.trapsKeyboardFocus = finalParams.trapsKeyboardFocus;
     this.placement = finalParams.placement;
     this.position = finalParams.position;
+    /**
+     * A wrapper to render into the invokerTemplate
+     *
+     * @property {HTMLElement}
+     */
     this.invoker = document.createElement('div');
     this.invoker.style.display = 'inline-block';
+    this.invokerTemplate = finalParams.invokerTemplate;
+    /**
+     * The actual invoker element we work with - it get's all the events and a11y
+     *
+     * @property {HTMLElement}
+     */
+    this.invokerNode = this.invoker;
+    if (finalParams.invokerNode) {
+      this.invokerNode = finalParams.invokerNode;
+      this.invoker = this.invokerNode;
+    }
+
+    /**
+     * A wrapper the contentTemplate renders into
+     *
+     * @property {HTMLElement}
+     */
     this.content = document.createElement('div');
     this.content.style.display = 'inline-block';
+    this.contentTemplate = finalParams.contentTemplate;
+    this.contentNode = this.content;
+    if (finalParams.contentNode) {
+      this.contentNode = finalParams.contentNode;
+      this.content = this.contentNode;
+    }
+
     this.contentId = `overlay-content-${Math.random()
       .toString(36)
       .substr(2, 10)}`;
     this._contentData = {};
-    this.invokerTemplate = finalParams.invokerTemplate;
-    this.invokerNode = finalParams.invokerNode;
-    this.contentTemplate = finalParams.contentTemplate;
-    this.contentNode = finalParams.contentNode;
     this.syncInvoker();
     this._updateContent();
     this._prevShown = false;
     this._prevData = {};
-
-    if (this.hidesOnEsc) this._setupHidesOnEsc();
+    this.__boundEscKeyHandler = this.__escKeyHandler.bind(this);
   }
 
   get isShown() {
@@ -109,10 +133,12 @@ export class LocalOverlayController {
 
       if (this.trapsKeyboardFocus) this._setupTrapsKeyboardFocus();
       if (this.hidesOnOutsideClick) this._setupHidesOnOutsideClick();
+      if (this.hidesOnEsc) this._setupHidesOnEsc();
     } else {
       this._updateContent();
       this.invokerNode.setAttribute('aria-expanded', false);
       if (this.hidesOnOutsideClick) this._teardownHidesOnOutsideClick();
+      if (this.hidesOnEsc) this._teardownHidesOnEsc();
     }
     this._prevShown = shown;
     this._prevData = data;
@@ -127,15 +153,15 @@ export class LocalOverlayController {
       this._containFocusHandler.disconnect();
       this._containFocusHandler = undefined; // eslint-disable-line no-param-reassign
     }
-    this._containFocusHandler = containFocus(this.content.firstElementChild);
+    this._containFocusHandler = containFocus(this.contentNode);
   }
 
   _setupHidesOnEsc() {
-    this.content.addEventListener('keyup', event => {
-      if (event.keyCode === keyCodes.escape) {
-        this.hide();
-      }
-    });
+    this.contentNode.addEventListener('keyup', this.__boundEscKeyHandler);
+  }
+
+  _teardownHidesOnEsc() {
+    this.contentNode.removeEventListener('keyup', this.__boundEscKeyHandler);
   }
 
   _setupHidesOnOutsideClick() {
@@ -162,14 +188,14 @@ export class LocalOverlayController {
       });
     };
 
-    this.content.addEventListener('click', this.__preventCloseOutsideClick, true);
-    this.invoker.addEventListener('click', this.__preventCloseOutsideClick, true);
+    this.contentNode.addEventListener('click', this.__preventCloseOutsideClick, true);
+    this.invokerNode.addEventListener('click', this.__preventCloseOutsideClick, true);
     document.documentElement.addEventListener('click', this.__onCaptureHtmlClick, true);
   }
 
   _teardownHidesOnOutsideClick() {
-    this.content.removeEventListener('click', this.__preventCloseOutsideClick, true);
-    this.invoker.removeEventListener('click', this.__preventCloseOutsideClick, true);
+    this.contentNode.removeEventListener('click', this.__preventCloseOutsideClick, true);
+    this.invokerNode.removeEventListener('click', this.__preventCloseOutsideClick, true);
     document.documentElement.removeEventListener('click', this.__onCaptureHtmlClick, true);
     this.__preventCloseOutsideClick = null;
     this.__onCaptureHtmlClick = null;
@@ -182,4 +208,10 @@ export class LocalOverlayController {
       this.contentNode.style.display = 'none';
     }
   }
+
+  __escKeyHandler(e) {
+    if (e.keyCode === keyCodes.escape) {
+      this.hide();
+    }
+  }
 }

packages/overlays/stories/local-overlay.stories.js

@@ -37,7 +37,7 @@ storiesOf('Local Overlay System|Local Overlay', module)
           `,
         invokerTemplate: () =>
           html`
-            <button @click=${() => popup.show()}>UK</button>
+            <button @click=${() => popup.toggle()}>UK</button>
           `,
       }),
     );
@@ -62,7 +62,7 @@ storiesOf('Local Overlay System|Local Overlay', module)
           `,
         invokerTemplate: () =>
           html`
-            <button @click=${() => popup.show()}>UK</button>
+            <button @click=${() => popup.toggle()}>UK</button>
           `,
       }),
     );
@@ -88,7 +88,7 @@ storiesOf('Local Overlay System|Local Overlay', module)
         `,
         invokerTemplate: () =>
           html`
-            <button @click=${() => popup.show()}>Click me</button>
+            <button @click=${() => popup.toggle()}>Click me</button>
           `,
       }),
     );
@@ -153,15 +153,25 @@ storiesOf('Local Overlay System|Local Overlay', module)
       </div>
     `;
   })
-  .add('On toggle', () => {
+  .add('trapsKeyboardFocus', () => {
     const popup = overlays.add(
       new LocalOverlayController({
         hidesOnEsc: true,
         hidesOnOutsideClick: true,
-        contentTemplate: () =>
-          html`
-            <div class="demo-popup">United Kingdom</div>
-          `,
+        trapsKeyboardFocus: true,
+        contentTemplate: () => html`
+          <div class="demo-popup">
+            <button id="el1">Button</button>
+            <a id="el2" href="#">Anchor</a>
+            <div id="el3" tabindex="0">Tabindex</div>
+            <input id="el4" placeholder="Input" />
+            <div id="el5" contenteditable>Content editable</div>
+            <textarea id="el6">Textarea</textarea>
+            <select id="el7">
+              <option>1</option>
+            </select>
+          </div>
+        `,
         invokerTemplate: () =>
           html`
             <button @click=${() => popup.toggle()}>UK</button>
@@ -173,35 +183,35 @@ storiesOf('Local Overlay System|Local Overlay', module)
         ${popupDemoStyle}
       </style>
       <div class="demo-box">
-        <label for="input">Weather in ${popup.invoker}${popup.content} toggles.</label>
+        ${popup.invoker}${popup.content}
       </div>
     `;
   })
-  .add('trapsKeyboardFocus', () => {
+  .add('trapsKeyboardFocus with nodes', () => {
+    const invokerNode = document.createElement('button');
+    invokerNode.innerHTML = 'Invoker Button';
+
+    const contentNode = document.createElement('div');
+    contentNode.classList.add('demo-popup');
+    const contentButton = document.createElement('button');
+    contentButton.innerHTML = 'Content Button';
+    const contentInput = document.createElement('input');
+    contentNode.appendChild(contentButton);
+    contentNode.appendChild(contentInput);
+
     const popup = overlays.add(
       new LocalOverlayController({
         hidesOnEsc: true,
         hidesOnOutsideClick: true,
         trapsKeyboardFocus: true,
-        contentTemplate: () => html`
-          <div class="demo-popup">
-            <button id="el1">Button</button>
-            <a id="el2" href="#">Anchor</a>
-            <div id="el3" tabindex="0">Tabindex</div>
-            <input id="el4" placeholder="Input" />
-            <div id="el5" contenteditable>Content editable</div>
-            <textarea id="el6">Textarea</textarea>
-            <select id="el7">
-              <option>1</option>
-            </select>
-          </div>
-        `,
-        invokerTemplate: () =>
-          html`
-            <button @click=${() => popup.show()}>UK</button>
-          `,
+        contentNode,
+        invokerNode,
       }),
     );
+
+    invokerNode.addEventListener('click', () => {
+      popup.toggle();
+    });
     return html`
       <style>
         ${popupDemoStyle}