From 61b1143a2e048e0b39d65d0acb038f4d888a404e Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 12 Jun 2024 19:19:21 +0100
Subject: [PATCH] Inserter: Allow focus to move to the toggle when opening the
 inserter, so that the browser can correctly handle focus-visible on the tabs
 (#62513)

---
 .../src/components/document-tools/index.js      | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
index 6ec999bd048012..54121652bbf131 100644
--- a/packages/editor/src/components/document-tools/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -28,10 +28,6 @@ import { store as editorStore } from '../../store';
 import EditorHistoryRedo from '../editor-history/redo';
 import EditorHistoryUndo from '../editor-history/undo';
 
-const preventDefault = ( event ) => {
-	event.preventDefault();
-};
-
 function DocumentTools( { className, disableBlockTools = false } ) {
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
@@ -72,6 +68,19 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 		};
 	}, [] );
 
+	const preventDefault = ( event ) => {
+		// Because the inserter behaves like a dialog,
+		// if the inserter is opened already then when we click on the toggle button
+		// then the initial click event will close the inserter and then be propagated
+		// to the inserter toggle and it will open it again.
+		// To prevent this we need to stop the propagation of the event.
+		// This won't be necessary when the inserter no longer behaves like a dialog.
+
+		if ( isInserterOpened ) {
+			event.preventDefault();
+		}
+	};
+
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );