Merge 142c9f988bb52f0cacbe8e03c7b65d1d7511c763 into 4189b3075c003b2d5dc9335195be7b750dfc2526

js/src/dom/event-handler.js

@@ -101,22 +101,18 @@ function bootstrapHandler(element, fn) {
 
 function bootstrapDelegationHandler(element, selector, fn) {
   return function handler(event) {
-    const domElements = element.querySelectorAll(selector)
+    const { target } = event
 
-    for (let { target } = event; target && target !== this; target = target.parentNode) {
-      for (const domElement of domElements) {
-        if (domElement !== target) {
-          continue
-        }
+    const trigger = target.closest(selector)
 
-        hydrateObj(event, { delegateTarget: target })
+    if (trigger && element.contains(trigger)) {
+      hydrateObj(event, { delegateTarget: trigger })
 
-        if (handler.oneOff) {
-          EventHandler.off(element, event.type, selector, fn)
-        }
-
-        return fn.apply(target, [event])
+      if (handler.oneOff) {
+        EventHandler.off(element, event.type, selector, fn)
       }
+
+      return fn.apply(trigger, [event])
     }
   }
 }

js/tests/unit/dom/event-handler.spec.js

@@ -70,6 +70,38 @@ describe('EventHandler', () => {
       })
     })
 
+    it('should find the correct target element via event delegation', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<div class="component">',
+          '<!-- Comment -->',
+          '<section>',
+          '<b>',
+          'Just text content',
+          '<svg>',
+          '<i>',
+          '<p>',
+          '<span>Click me</span>',
+          '</p>',
+          '</i>',
+          '</svg>',
+          '</b>',
+          '</section>',
+          '</div>'
+        ].join('')
+
+        EventHandler.on(document, 'click', '.component', () => {
+          expect(component).toHaveClass('component')
+          resolve()
+        })
+
+        const component = document.querySelector('.component')
+        const span = fixtureEl.querySelector('span')
+
+        EventHandler.trigger(span, 'click')
+      })
+    })
+
     it('should handle event delegation', () => {
       return new Promise(resolve => {
         EventHandler.on(document, 'click', '.test', () => {

js/tests/unit/util/focustrap.spec.js

@@ -96,6 +96,7 @@ describe('FocusTrap', () => {
         const last = document.getElementById('last')
         const outside = document.getElementById('outside')
 
+        document.closest = () => undefined
         spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
         const spy = spyOn(first, 'focus').and.callThrough()
 
@@ -135,6 +136,7 @@ describe('FocusTrap', () => {
         const last = document.getElementById('last')
         const outside = document.getElementById('outside')
 
+        document.closest = () => undefined
         spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
         const spy = spyOn(last, 'focus').and.callThrough()