Fix regression for handling `mouseenter`/`mouseleave` events introduced by #33310 (#33679)

* test: update spec for sibling adjacent mouseenter/mouseleave events

there is a regression introduced by #33310 - this would have catched that

* fix: fixup regression for mouseenter/mouseleave events introduced by #33310

the old logic only worked for parent-child movement since it checked for the relatedTarget to contain the delegateTarget - this should be fixed with this

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

2 files changed, 16 insertions, 2 deletions

diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js
index 8ccb887fc3..3293f397d5 100644
--- a/js/src/dom/event-handler.js
+++ b/js/src/dom/event-handler.js
@@ -170,7 +170,7 @@ function addHandler(element, originalTypeEvent, handler, delegationFn, oneOff) {
   if (customEventsRegex.test(originalTypeEvent)) {
     const wrapFn = fn => {
       return function (event) {
-        if (!event.relatedTarget || (event.relatedTarget !== event.delegateTarget && event.relatedTarget.contains(event.delegateTarget))) {
+        if (!event.relatedTarget || (event.relatedTarget !== event.delegateTarget && !event.delegateTarget.contains(event.relatedTarget))) {
           return fn.call(this, event)
         }
       }
diff --git a/js/tests/unit/dom/event-handler.spec.js b/js/tests/unit/dom/event-handler.spec.js
index 5fb1f01956..4dc4ffc353 100644
--- a/js/tests/unit/dom/event-handler.spec.js
+++ b/js/tests/unit/dom/event-handler.spec.js
@@ -86,6 +86,7 @@ describe('EventHandler', () => {
         '<div class="deep"></div>',
         '</div>',
         '</div>',
+        '<div class="sibling"></div>',
         '</div>'
       ]
 
@@ -93,6 +94,7 @@ describe('EventHandler', () => {
       const inner = fixtureEl.querySelector('.inner')
       const nested = fixtureEl.querySelector('.nested')
       const deep = fixtureEl.querySelector('.deep')
+      const sibling = fixtureEl.querySelector('.sibling')
 
       const enterSpy = jasmine.createSpy('mouseenter')
       const leaveSpy = jasmine.createSpy('mouseleave')
@@ -104,6 +106,14 @@ describe('EventHandler', () => {
       EventHandler.on(outer, 'mouseenter', '.inner', delegateEnterSpy)
       EventHandler.on(outer, 'mouseleave', '.inner', delegateLeaveSpy)
 
+      EventHandler.on(sibling, 'mouseenter', () => {
+        expect(enterSpy.calls.count()).toBe(2)
+        expect(leaveSpy.calls.count()).toBe(2)
+        expect(delegateEnterSpy.calls.count()).toBe(2)
+        expect(delegateLeaveSpy.calls.count()).toBe(2)
+        done()
+      })
+
       const moveMouse = (from, to) => {
         from.dispatchEvent(new MouseEvent('mouseout', {
           bubbles: true,
@@ -116,6 +126,7 @@ describe('EventHandler', () => {
         }))
       }
 
+      // from outer to deep and back to outer (nested)
       moveMouse(outer, inner)
       moveMouse(inner, nested)
       moveMouse(nested, deep)
@@ -128,7 +139,10 @@ describe('EventHandler', () => {
         expect(leaveSpy.calls.count()).toBe(1)
         expect(delegateEnterSpy.calls.count()).toBe(1)
         expect(delegateLeaveSpy.calls.count()).toBe(1)
-        done()
+
+        // from outer to inner to sibling (adjacent)
+        moveMouse(outer, inner)
+        moveMouse(inner, sibling)
       }, 20)
     })
   })