fix(tooltip): fix instantiation upon focus (#189)

carbon-design-system · Jun 20, 2017 · febb5be · febb5be
1 parent a5374b2
commit febb5be
Showing 1 changed file with 13 additions and 8 deletions.
diff --git a/src/globals/js/mixins/init-component-by-event.js b/src/globals/js/mixins/init-component-by-event.js
@@ -24,15 +24,20 @@ export default function (ToMix) {
       if (target.nodeType === Node.ELEMENT_NODE && target.matches(effectiveOptions.selectorInit)) {
         this.create(target, options);
       } else {
-        const handles = effectiveOptions.initEventNames.map(name => on(target, name, (event) => {
-          const element = eventMatches(event, effectiveOptions.selectorInit);
-          if (element && !this.components.has(element)) {
-            const component = this.create(element, options);
-            if (typeof component.createdByEvent === 'function') {
-              component.createdByEvent(event);
+        // To work around non-bubbling `focus` event, use `focusin` event instead of it's available, and "capture mode" otherwise
+        const hasFocusin = 'onfocusin' in (target.nodeType === Node.ELEMENT_NODE ? target.ownerDocument : target).defaultView;
+        const handles = effectiveOptions.initEventNames.map((name) => {
+          const eventName = name === 'focus' && hasFocusin ? 'focusin' : name;
+          return on(target, eventName, (event) => {
+            const element = eventMatches(event, effectiveOptions.selectorInit);
+            if (element && !this.components.has(element)) {
+              const component = this.create(element, options);
+              if (typeof component.createdByEvent === 'function') {
+                component.createdByEvent(event);
+              }
             }
-          }
-        }));
+          }, name === 'focus' && !hasFocusin);
+        });
         return {
           release() {
             for (let handle = handles.pop(); handle; handle = handles.pop()) {