rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
* 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>
This commit is contained in:
alpadev 2021-04-19 07:30:33 +02:00 committed by GitHub
parent a9d7a62658
commit d67121db28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/dom/event-handler.js
View File

@ -170,7 +170,7 @@ function addHandler(element, originalTypeEvent, handler, delegationFn, oneOff) {
if (customEventsRegex.test(originalTypeEvent)) { if (customEventsRegex.test(originalTypeEvent)) {
const wrapFn = fn => { const wrapFn = fn => {
return function (event) { 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) return fn.call(this, event)
} }
} }

16
js/tests/unit/dom/event-handler.spec.js
View File

@ -86,6 +86,7 @@ describe('EventHandler', () => {
'<div class="deep"></div>', '<div class="deep"></div>',
'</div>', '</div>',
'</div>', '</div>',
'<div class="sibling"></div>',
'</div>' '</div>'
] ]
@ -93,6 +94,7 @@ describe('EventHandler', () => {
const inner = fixtureEl.querySelector('.inner') const inner = fixtureEl.querySelector('.inner')
const nested = fixtureEl.querySelector('.nested') const nested = fixtureEl.querySelector('.nested')
const deep = fixtureEl.querySelector('.deep') const deep = fixtureEl.querySelector('.deep')
const sibling = fixtureEl.querySelector('.sibling')
const enterSpy = jasmine.createSpy('mouseenter') const enterSpy = jasmine.createSpy('mouseenter')
const leaveSpy = jasmine.createSpy('mouseleave') const leaveSpy = jasmine.createSpy('mouseleave')
@ -104,6 +106,14 @@ describe('EventHandler', () => {
EventHandler.on(outer, 'mouseenter', '.inner', delegateEnterSpy) EventHandler.on(outer, 'mouseenter', '.inner', delegateEnterSpy)
EventHandler.on(outer, 'mouseleave', '.inner', delegateLeaveSpy) 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) => { const moveMouse = (from, to) => {
from.dispatchEvent(new MouseEvent('mouseout', { from.dispatchEvent(new MouseEvent('mouseout', {
bubbles: true, bubbles: true,
@ -116,6 +126,7 @@ describe('EventHandler', () => {
})) }))
} }
// from outer to deep and back to outer (nested)
moveMouse(outer, inner) moveMouse(outer, inner)
moveMouse(inner, nested) moveMouse(inner, nested)
moveMouse(nested, deep) moveMouse(nested, deep)
@ -128,7 +139,10 @@ describe('EventHandler', () => {
expect(leaveSpy.calls.count()).toBe(1) expect(leaveSpy.calls.count()).toBe(1)
expect(delegateEnterSpy.calls.count()).toBe(1) expect(delegateEnterSpy.calls.count()).toBe(1)
expect(delegateLeaveSpy.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) }, 20)
}) })
}) })