Skip to content

Commit

Permalink
Fix regression for handling mouseenter/mouseleave events introduc…
Browse files Browse the repository at this point in the history
…ed 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>
  • Loading branch information
alpadev and XhmikosR committed Apr 19, 2021
1 parent a9d7a62 commit d67121d
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
2 changes: 1 addition & 1 deletion js/src/dom/event-handler.js
Expand Up @@ -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)
}
}
Expand Down
16 changes: 15 additions & 1 deletion js/tests/unit/dom/event-handler.spec.js
Expand Up @@ -86,13 +86,15 @@ describe('EventHandler', () => {
'<div class="deep"></div>',
'</div>',
'</div>',
'<div class="sibling"></div>',
'</div>'
]

const outer = fixtureEl.querySelector('.outer')
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')
Expand All @@ -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,
Expand All @@ -116,6 +126,7 @@ describe('EventHandler', () => {
}))
}

// from outer to deep and back to outer (nested)
moveMouse(outer, inner)
moveMouse(inner, nested)
moveMouse(nested, deep)
Expand All @@ -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)
})
})
Expand Down

0 comments on commit d67121d

Please sign in to comment.