use get selector from element only when needed

2 files changed, 66 insertions, 5 deletions

diff --git a/js/src/util/index.js b/js/src/util/index.js
index 5788c8749e..537b391dcc 100644
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -28,20 +28,32 @@ const getUID = prefix => {
   return prefix
 }
 
-const getSelectorFromElement = element => {
+const getSelector = element => {
   let selector = element.getAttribute('data-target')
 
   if (!selector || selector === '#') {
     const hrefAttr = element.getAttribute('href')
 
-    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : ''
+    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null
   }
 
-  try {
+  return selector
+}
+
+const getSelectorFromElement = element => {
+  const selector = getSelector(element)
+
+  if (selector) {
     return document.querySelector(selector) ? selector : null
-  } catch (error) {
-    return null
   }
+
+  return null
+}
+
+const getElementFromSelector = element => {
+  const selector = getSelector(element)
+
+  return selector ? document.querySelector(selector) : null
 }
 
 const getTransitionDurationFromElement = element => {
@@ -169,6 +181,7 @@ export {
   TRANSITION_END,
   getUID,
   getSelectorFromElement,
+  getElementFromSelector,
   getTransitionDurationFromElement,
   triggerTransitionEnd,
   isElement,
diff --git a/js/src/util/index.spec.js b/js/src/util/index.spec.js
index bf450ee365..b667c270ea 100644
--- a/js/src/util/index.spec.js
+++ b/js/src/util/index.spec.js
@@ -64,6 +64,54 @@ describe('Util', () => {
 
       expect(Util.getSelectorFromElement(testEl)).toBeNull()
     })
+
+    it('should return null if no selector', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const testEl = fixtureEl.querySelector('div')
+
+      expect(Util.getSelectorFromElement(testEl)).toBeNull()
+    })
+  })
+
+  describe('getElementFromSelector', () => {
+    it('should get element from data-target', () => {
+      fixtureEl.innerHTML = [
+        '<div id="test" data-target=".target"></div>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
+    })
+
+    it('should get element from href if no data-target set', () => {
+      fixtureEl.innerHTML = [
+        '<a id="test" href=".target"></a>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
+    })
+
+    it('should return null if element not found', () => {
+      fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(Util.getElementFromSelector(testEl)).toBeNull()
+    })
+
+    it('should return null if no selector', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const testEl = fixtureEl.querySelector('div')
+
+      expect(Util.getElementFromSelector(testEl)).toBeNull()
+    })
   })
 
   describe('getTransitionDurationFromElement', () => {