Block Editor: Fix JS error in the 'useTabNav' hook (#67102)

* Block Editor: Fix JS error in the 'useTabNav' hook * Focus on canvas when there's no section root Co-authored-by: Mamaduka <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: getdave <[email protected]>
WordPress · Dec 5, 2024 · 68a6dda · 68a6dda
1 parent 281bbae
commit 68a6dda
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
@@ -35,6 +35,11 @@ export default function useTabNav() {
 	const noCaptureRef = useRef();
 
 	function onFocusCapture( event ) {
+		const canvasElement =
+			container.current.ownerDocument === event.target.ownerDocument
+				? container.current
+				: container.current.ownerDocument.defaultView.frameElement;
+
 		// Do not capture incoming focus if set by us in WritingFlow.
 		if ( noCaptureRef.current ) {
 			noCaptureRef.current = null;
@@ -64,17 +69,15 @@ export default function useTabNav() {
 					.focus();
 			}
 			// If we don't have any section blocks, focus the section root.
-			else {
+			else if ( sectionRootClientId ) {
 				container.current
 					.querySelector( `[data-block="${ sectionRootClientId }"]` )
 					.focus();
+			} else {
+				// If we don't have any section root, focus the canvas.
+				canvasElement.focus();
 			}
 		} else {
-			const canvasElement =
-				container.current.ownerDocument === event.target.ownerDocument
-					? container.current
-					: container.current.ownerDocument.defaultView.frameElement;
-
 			const isBefore =
 				// eslint-disable-next-line no-bitwise
 				event.target.compareDocumentPosition( canvasElement ) &