From 0b9bf245f7e7a33c28307a6209fcd97de07b995a Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 25 Nov 2022 01:22:18 +0900
Subject: [PATCH] Constrained tabbing: fix unstable behavior in firefox
 (#42653)

* Constrained tabbing: fix unstable behavior in firefox

* Remove itself when the trap loses focus.

* Remove unnecessary variable declaration and clearTimeout
---
 .../compose/src/hooks/use-constrained-tabbing/index.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/compose/src/hooks/use-constrained-tabbing/index.js b/packages/compose/src/hooks/use-constrained-tabbing/index.js
index ecbc7db5a1c0f..ba637951563f4 100644
--- a/packages/compose/src/hooks/use-constrained-tabbing/index.js
+++ b/packages/compose/src/hooks/use-constrained-tabbing/index.js
@@ -32,9 +32,6 @@ import useRefEffect from '../use-ref-effect';
  */
 function useConstrainedTabbing() {
 	return useRefEffect( ( /** @type {HTMLElement} */ node ) => {
-		/** @type {number|undefined} */
-		let timeoutId;
-
 		function onKeyDown( /** @type {KeyboardEvent} */ event ) {
 			const { keyCode, shiftKey, target } = event;
 
@@ -62,15 +59,16 @@ function useConstrainedTabbing() {
 
 			trap.tabIndex = -1;
 			node[ domAction ]( trap );
+
+			// Remove itself when the trap loses focus.
+			trap.addEventListener( 'blur', () => node.removeChild( trap ) );
+
 			trap.focus();
-			// Remove after the browser moves focus to the next element.
-			timeoutId = setTimeout( () => node.removeChild( trap ) );
 		}
 
 		node.addEventListener( 'keydown', onKeyDown );
 		return () => {
 			node.removeEventListener( 'keydown', onKeyDown );
-			clearTimeout( timeoutId );
 		};
 	}, [] );
 }