Merge pull request #424 from rackerlabs/debug-tooltip-compat-audit

Debug tooltip compat audit

Author: CITguy

docs/components/tooltips/test.html

@@ -47,8 +47,8 @@ <h2>Unconventional HTML5-compatible IDs</h2>
       <div class="hxCol">
         <h3>ID on Target</h3>
         <p>
-          <span id="000c075715ed46eb61242f85e80aaaa1">Hover Here</span>
-          <hx-tooltip for="000c075715ed46eb61242f85e80aaaa1">
+          <span id="a000c075715ed46eb61242f85e80aaaa1">Hover Here</span>
+          <hx-tooltip for="a000c075715ed46eb61242f85e80aaaa1">
             Do you like my hat?
           </hx-tooltip>
         </p>
@@ -58,7 +58,7 @@ <h3>ID on Tooltip</h3>
         <p>
           <span id="html-tip-2">Hover Here</span>
           <hx-tooltip
-            id="100d90208e58f24216be64de517bbbb2"
+            id="b100d90208e58f24216be64de517bbbb2"
             for="html-tip-2"
           >
             Do you like my hat?
@@ -68,10 +68,10 @@ <h3>ID on Tooltip</h3>
       <div class="hxCol">
         <h3>ID on Both Tooltip and Target</h3>
         <p>
-          <span id="200c075715ed46eb61242f85e80cccc3">Hover Here</span>
+          <span id="c200c075715ed46eb61242f85e80cccc3">Hover Here</span>
           <hx-tooltip
-            for="200c075715ed46eb61242f85e80cccc3"
-            id="200d90208e58f24216be64de517dddd3"
+            for="c200c075715ed46eb61242f85e80cccc3"
+            id="c200d90208e58f24216be64de517dddd3"
           >
             Do you like my hat?
           </hx-tooltip>

src/helix-ui/mixins/Positionable.js

@@ -39,7 +39,7 @@ export const Positionable = (superclass) => {
             this.addEventListener('close', this.__onClose);
 
             if (this.open) {
-                this.__addOpenListeners();
+                this.$emit('open');
             }
         }
 
@@ -100,8 +100,12 @@ export const Positionable = (superclass) => {
          * @type {HTMLElement}
          */
         get relativeElement () {
+            if (!this.isConnected) {
+                return;
+            }
+
             if (this.relativeTo) {
-                return this.getRootNode().getElementById(this.relativeTo);
+                return this.getRootNode().querySelector(`#${this.relativeTo}`);
             } else {
                 return this.controlElement;
             }
@@ -119,28 +123,14 @@ export const Positionable = (superclass) => {
             this.setAttribute('relative-to', value);
         }
 
-        /**
-         * Calculate fixed {x,y} coordinates relative to another HTML element.
-         *
-         * @returns {Object} Coordinate object with `x` and `y` properties.
-         */
-        getCoordinates () {
-            let posRect = this.getBoundingClientRect();
-            let relRect = this.relativeElement.getBoundingClientRect();
-            let calculate = offsetFunctionMap[this.position];
-            let opts = this.__getDeltas();
-
-            return calculate(posRect, relRect, opts);
-        }
-
         /**
          * Calculate and apply new (x,y) coordinates.
          *
          * Requires the element to be open with a `relativeElement`.
          */
         reposition () {
             if (this.open && this.relativeElement) {
-                let { x, y } = this.getCoordinates();
+                let { x, y } = this.__getCoordinates();
 
                 this.style.top = `${y}px`;
                 this.style.left = `${x}px`;
@@ -153,11 +143,33 @@ export const Positionable = (superclass) => {
          * Add event listeners that only apply when open.
          */
         __addOpenListeners () {
+            if (!this.controlElement) {
+                return;
+            }
+
             document.addEventListener('click', this.__onDocumentClick);
             document.addEventListener('scroll', this.__onDocumentScroll, { passive: true });
             window.addEventListener('resize', this.__onWindowResize, { passive: true });
         }
 
+        /**
+         * Calculate fixed {x,y} coordinates relative to another HTML element.
+         *
+         * @returns {Object} Coordinate object with `x` and `y` properties.
+         */
+        __getCoordinates () {
+            if (!this.relativeElement) {
+                return { x: 0, y: 0 };
+            }
+
+            let posRect = this.getBoundingClientRect();
+            let relRect = this.relativeElement.getBoundingClientRect();
+            let calculate = offsetFunctionMap[this.position];
+            let opts = this.__getDeltas();
+
+            return calculate(posRect, relRect, opts);
+        }
+
         /**
          * Calculate X and Y adjustments based on configuration via the following attributes.
          * * `data-margin`
@@ -220,6 +232,10 @@ export const Positionable = (superclass) => {
          * @param {Event} evt
          */
         __onDocumentClick (evt) {
+            if (!this.controlElement) {
+                return;
+            }
+
             let inComponent = this.contains(evt.target);
             let inControl = this.controlElement.contains(evt.target);
             let isBackground = (!inComponent && !inControl);
@@ -240,9 +256,7 @@ export const Positionable = (superclass) => {
          * Positionable 'open' event listener.
          */
         __onOpen () {
-            if (this.relativeElement) {
-                this.__addOpenListeners();
-            }
+            this.__addOpenListeners();
             this.reposition();
         }