From 06b3438519192dfa776a1d9a2aa918488f6ea640 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Thu, 9 Feb 2023 20:52:34 +0800
Subject: [PATCH] Fix unable to close the block inserter when clicking on the
 toggle button

---
 .../components/header/header-toolbar/index.js |  9 ++++---
 .../editor/various/inserting-blocks.spec.js   | 25 +++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index b4d30adc20244..55ffd265a96cf 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -91,10 +91,13 @@ function HeaderToolbar() {
 			/>
 		</>
 	);
-	const openInserter = useCallback( () => {
+	const toggleInserter = useCallback( () => {
 		if ( isInserterOpened ) {
-			// Focusing the inserter button closes the inserter popover.
+			// Focusing the inserter button should close the inserter popover.
+			// However, there are some cases it won't close when the focus is lost.
+			// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
 			inserterButton.current.focus();
+			setIsInserterOpened( false );
 		} else {
 			setIsInserterOpened( true );
 		}
@@ -120,7 +123,7 @@ function HeaderToolbar() {
 					variant="primary"
 					isPressed={ isInserterOpened }
 					onMouseDown={ preventDefault }
-					onClick={ openInserter }
+					onClick={ toggleInserter }
 					disabled={ ! isInserterEnabled }
 					icon={ plus }
 					label={ showIconLabels ? shortLabel : longLabel }
diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
index fdc4615f197aa..a0d042c06d6a0 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -289,6 +289,31 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe( beforeContent );
 	} );
+
+	// A test for https://github.com/WordPress/gutenberg/issues/43090.
+	test( 'should close the inserter when clicking on the toggle button', async ( {
+		page,
+		editor,
+	} ) => {
+		const inserterButton = page.getByRole( 'button', {
+			name: 'Toggle block inserter',
+		} );
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await inserterButton.click();
+
+		await blockLibrary.getByRole( 'option', { name: 'Buttons' } ).click();
+
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [ { name: 'core/buttons' } ] );
+
+		await inserterButton.click();
+
+		await expect( blockLibrary ).toBeHidden();
+	} );
 } );
 
 test.describe( 'insert media from inserter', () => {