Skip to content

Commit

Permalink
Constrained tabbing: fix unstable behavior in firefox (#42653)
Browse files Browse the repository at this point in the history
* Constrained tabbing: fix unstable behavior in firefox

* Remove itself when the trap loses focus.

* Remove unnecessary variable declaration and clearTimeout
  • Loading branch information
t-hamano committed Nov 24, 2022
1 parent ee90c2b commit 0b9bf24
Showing 1 changed file with 4 additions and 6 deletions.
10 changes: 4 additions & 6 deletions packages/compose/src/hooks/use-constrained-tabbing/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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 );
};
}, [] );
}
Expand Down

0 comments on commit 0b9bf24

Please sign in to comment.