Merge pull request #435 from rackerlabs/fix-querySelector-ids

fix(Positionable): correct support for HTML5 IDs

Author: CITguy

docs/components/popovers/test.html

@@ -253,13 +253,13 @@ <h2>
   </section>
 
   <section>
-    <h2>Unconventional HTML5-compatible ID</h2>
+    <h2>HTML5-compatible ID</h2>
     <p>
-      <hx-disclosure aria-controls="f2d90208e58f24216be64de517570c628" class="hxBtn">
-        <code>hx-disclosure[aria-controls="f2d90208e58f24216be64de517570c628"]</code>
+      <hx-disclosure aria-controls="2d90208e58f24216be64de517570c628" class="hxBtn">
+        <code>hx-disclosure[aria-controls="2d90208e58f24216be64de517570c628"]</code>
       </hx-disclosure>
     </p>
-    <hx-popover id="f2d90208e58f24216be64de517570c628">
+    <hx-popover id="2d90208e58f24216be64de517570c628">
       <hx-div>
         How do you like my hat?
       </hx-div>

docs/components/tooltips/test.html

@@ -41,14 +41,14 @@ <h2>Appearance (formatted)</h2>
   </section>
 
   <section>
-    <h2>Unconventional HTML5-compatible IDs</h2>
+    <h2>HTML5-compatible IDs</h2>
 
     <div class="hxRow hxAuto">
       <div class="hxCol">
         <h3>ID on Target</h3>
         <p>
-          <span id="a000c075715ed46eb61242f85e80aaaa1">Hover Here</span>
-          <hx-tooltip for="a000c075715ed46eb61242f85e80aaaa1">
+          <span id="000c075715ed46eb61242f85e80aaaa1">Hover Here</span>
+          <hx-tooltip for="000c075715ed46eb61242f85e80aaaa1">
             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="b100d90208e58f24216be64de517bbbb2"
+            id="100d90208e58f24216be64de517bbbb2"
             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="c200c075715ed46eb61242f85e80cccc3">Hover Here</span>
+          <span id="200c075715ed46eb61242f85e80cccc3">Hover Here</span>
           <hx-tooltip
-            for="c200c075715ed46eb61242f85e80cccc3"
-            id="c200d90208e58f24216be64de517dddd3"
+            for="200c075715ed46eb61242f85e80cccc3"
+            id="200d90208e58f24216be64de517dddd3"
           >
             Do you like my hat?
           </hx-tooltip>
@@ -129,7 +129,7 @@ <h3>Anchor</h3>
         <hx-tooltip for="anchor-target">
           #anchor-target
         </hx-tooltip>
-        <p class="hxSubdued hxSubBody">Shouldn't show.</p>
+        <p class="hxSubdued hxSubBody">Shouldn't show via keyboard focus.</p>
       </div>
 
       <div class="hxCol">
@@ -206,6 +206,9 @@ <h3>File Input (hx-file-input)</h3>
         <hx-tooltip for="hx-file-input-target">
           #hx-file-input-target
         </hx-tooltip>
+        <p>
+          <hx-error>Adds double tab stop</hx-error>
+        </p>
       </div>
 
       <div class="hxCol">

src/helix-ui/elements/HXDisclosureElement.js

@@ -80,7 +80,7 @@ export class HXDisclosureElement extends HXElement {
     get target () {
         if (this.isConnected && !this._target) {
             let targetId = this.getAttribute('aria-controls');
-            this._target = this.getRootNode().querySelector(`#${targetId}`);
+            this._target = this.getRootNode().querySelector(`[id="${targetId}"]`);
         }
         return this._target;
     }

src/helix-ui/elements/HXTooltipElement.js

@@ -3,7 +3,7 @@ import shadowMarkup from './HXTooltipElement.html';
 import shadowStyles from './HXTooltipElement.less';
 
 import { Positionable } from '../mixins/Positionable';
-import { KEYS, mix, generateId } from '../utils';
+import { KEYS, defer, mix, generateId } from '../utils';
 
 const TOOLTIP_DELAY = 500;
 
@@ -34,6 +34,7 @@ export class HXTooltipElement extends _ProtoClass {
         this.DEFAULT_POSITION = 'top-center';
         this.POSITION_OFFSET = 20;
 
+        this.$onConnect = defer(this.$onConnect);
         this._onCtrlBlur = this._onCtrlBlur.bind(this);
         this._onCtrlFocus = this._onCtrlFocus.bind(this);
         this._onCtrlMouseEnter = this._onCtrlMouseEnter.bind(this);
@@ -94,7 +95,7 @@ export class HXTooltipElement extends _ProtoClass {
      */
     get controlElement () {
         if (this.isConnected) {
-            return this.getRootNode().querySelector(`#${this.htmlFor}`);
+            return this.getRootNode().querySelector(`[id="${this.htmlFor}"]`);
         }
     }
 

src/helix-ui/mixins/Positionable.js

@@ -179,7 +179,7 @@ export const Positionable = (superclass) => {
             }
 
             if (this.relativeTo) {
-                return this.getRootNode().querySelector(`#${this.relativeTo}`);
+                return this.getRootNode().querySelector(`[id="${this.relativeTo}"]`);
             } else {
                 return this.controlElement;
             }