From 939a5dc51efa0bd7dfdbb09fa00901e7221e85c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tetsuaki=20Hamano=20/=20=E6=B5=9C=E9=87=8E=20=E5=93=B2?= =?UTF-8?q?=E6=98=8E?= Date: Sat, 23 Jul 2022 06:54:16 +0000 Subject: [PATCH 1/3] Constrained tabbing: fix unstable behavior in firefox --- packages/compose/src/hooks/use-constrained-tabbing/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compose/src/hooks/use-constrained-tabbing/index.js b/packages/compose/src/hooks/use-constrained-tabbing/index.js index ecbc7db5a1c0f..e19b750ff9b00 100644 --- a/packages/compose/src/hooks/use-constrained-tabbing/index.js +++ b/packages/compose/src/hooks/use-constrained-tabbing/index.js @@ -64,7 +64,7 @@ function useConstrainedTabbing() { node[ domAction ]( trap ); trap.focus(); // Remove after the browser moves focus to the next element. - timeoutId = setTimeout( () => node.removeChild( trap ) ); + timeoutId = setTimeout( () => node.removeChild( trap ), 10 ); } node.addEventListener( 'keydown', onKeyDown ); From a12ad38cc0c2692f9c025c3d63e0a394a1e29461 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Mon, 26 Sep 2022 23:31:52 +0900 Subject: [PATCH 2/3] Remove itself when the trap loses focus. --- packages/compose/src/hooks/use-constrained-tabbing/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/compose/src/hooks/use-constrained-tabbing/index.js b/packages/compose/src/hooks/use-constrained-tabbing/index.js index e19b750ff9b00..ee20f868e89b4 100644 --- a/packages/compose/src/hooks/use-constrained-tabbing/index.js +++ b/packages/compose/src/hooks/use-constrained-tabbing/index.js @@ -62,9 +62,11 @@ 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 ), 10 ); } node.addEventListener( 'keydown', onKeyDown ); From 11a1cfae0f0ad1203a8d58645982282e8c7bcd10 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 24 Nov 2022 21:24:43 +0900 Subject: [PATCH 3/3] Remove unnecessary variable declaration and clearTimeout --- packages/compose/src/hooks/use-constrained-tabbing/index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/compose/src/hooks/use-constrained-tabbing/index.js b/packages/compose/src/hooks/use-constrained-tabbing/index.js index ee20f868e89b4..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; @@ -72,7 +69,6 @@ function useConstrainedTabbing() { node.addEventListener( 'keydown', onKeyDown ); return () => { node.removeEventListener( 'keydown', onKeyDown ); - clearTimeout( timeoutId ); }; }, [] ); }