From c868408adeb8db7b440b8015fea674aa714bed5e Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 19 Dec 2023 14:14:26 -0600 Subject: [PATCH] Fix block lock toolbar item stealing focus when mounted with StrictMode (#57185) --- .../src/components/block-lock/toolbar.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-lock/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js index 5ba08b08846a4..14a941a9011b6 100644 --- a/packages/block-editor/src/components/block-lock/toolbar.js +++ b/packages/block-editor/src/components/block-lock/toolbar.js @@ -23,6 +23,7 @@ export default function BlockLockToolbar( { clientId, wrapperRef } ) { const lockButtonRef = useRef( null ); const isFirstRender = useRef( true ); + const hasModalOpened = useRef( false ); const shouldHideBlockLockUI = ! canLock || ( canEdit && canMove && canRemove ); @@ -36,7 +37,19 @@ export default function BlockLockToolbar( { clientId, wrapperRef } ) { return; } - if ( ! isModalOpen && shouldHideBlockLockUI ) { + if ( isModalOpen && ! hasModalOpened.current ) { + hasModalOpened.current = true; + } + + // We only want to allow this effect to happen if the modal has been opened. + // The issue is when we're returning focus from the block lock modal to a toolbar, + // so it can only happen after a modal has been opened. Without this, the toolbar + // will steal focus on rerenders. + if ( + hasModalOpened.current && + ! isModalOpen && + shouldHideBlockLockUI + ) { focus.focusable .find( wrapperRef.current, { sequential: false,