diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js index 0afb45d3f844e..c43d96dcb1c9c 100644 --- a/packages/react-dom/src/events/DOMPluginEventSystem.js +++ b/packages/react-dom/src/events/DOMPluginEventSystem.js @@ -747,13 +747,16 @@ export function accumulateSinglePhaseListeners( // this out by checking if intercept fiber set on the event matches the // current instance fiber. In which case, we should clear all existing // listeners. - if ( - enableCreateEventHandleAPI && - nativeEvent.type === 'beforeblur' && + if (enableCreateEventHandleAPI && nativeEvent.type === 'beforeblur') { // $FlowFixMe: internal field - nativeEvent._detachedInterceptFiber === instance - ) { - listeners = []; + const detachedInterceptFiber = nativeEvent._detachedInterceptFiber; + if ( + detachedInterceptFiber !== null && + (detachedInterceptFiber === instance || + detachedInterceptFiber === instance.alternate) + ) { + listeners = []; + } } instance = instance.return; } diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js index 50645bb2020d5..004f0bb631f31 100644 --- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js +++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js @@ -2425,7 +2425,7 @@ describe('DOMPluginEventSystem', () => { }); // @gate experimental - it('beforeblur has the correct propagation mechancis after a nested focused element is unmounted', () => { + it('beforeblur should skip handlers from a deleted subtree after the focused element is unmounted', () => { const onBeforeBlur = jest.fn(); const innerRef = React.createRef(); const innerRef2 = React.createRef(); @@ -2565,7 +2565,7 @@ describe('DOMPluginEventSystem', () => { }); // @gate experimental - it('beforeblur has the correct propagation mechancis after a nested focused element is suspended', () => { + it('beforeblur should skip handlers from a deleted subtree after the focused element is suspended', () => { const onBeforeBlur = jest.fn(); const innerRef = React.createRef(); const innerRef2 = React.createRef(); diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index b844413196ad4..fffa71d20801b 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -2172,7 +2172,7 @@ function commitBeforeMutationEffectsImpl(fiber: Fiber) { doesFiberContain(fiber, focusedInstanceHandle) ) { shouldFireAfterActiveInstanceBlur = true; - beforeActiveInstanceBlur(current); + beforeActiveInstanceBlur(fiber); } } diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 22bdb9fe0f967..cece268e3d017 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -2271,7 +2271,7 @@ function commitBeforeMutationEffects() { doesFiberContain(nextEffect, focusedInstanceHandle) ) { shouldFireAfterActiveInstanceBlur = true; - beforeActiveInstanceBlur(current); + beforeActiveInstanceBlur(nextEffect); } } }