Block Library: Handle Popover onClose for LinkControl (#19885)

* Block Library: Handle Popover onClose for LinkControl * E2E Tests: Verify link popover Escape handling
WordPress · Jan 28, 2020 · 6f97e52 · 6f97e52
1 parent a38b633
commit 6f97e52
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 6 deletions.
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -97,7 +97,10 @@ function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onTo
 		setIsURLPickerOpen( true );
 	};
 	const linkControl = isURLPickerOpen && (
-		<Popover position="bottom center">
+		<Popover
+			position="bottom center"
+			onClose={ () => setIsURLPickerOpen( false ) }
+		>
 			<LinkControl
 				className="wp-block-navigation-link__inline-link-input"
 				value={ { url, title, opensInNewTab } }
@@ -111,9 +114,6 @@ function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onTo
 						onToggleOpenInNewTab( newOpensInNewTab );
 					}
 				} }
-				onClose={ () => {
-					setIsURLPickerOpen( false );
-				} }
 			/>
 		</Popover>
 	);

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -175,7 +175,10 @@ function NavigationLinkEdit( {
 						</span>
 					}
 					{ isLinkOpen && (
-						<Popover position="bottom center">
+						<Popover
+							position="bottom center"
+							onClose={ () => setIsLinkOpen( false ) }
+						>
 							<LinkControl
 								className="wp-block-navigation-link__inline-link-input"
 								value={ link }
@@ -202,7 +205,6 @@ function NavigationLinkEdit( {
 									opensInNewTab: newOpensInNewTab,
 									id,
 								} ) }
-								onClose={ () => setIsLinkOpen( false ) }
 							/>
 						</Popover>
 					) }

diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap
@@ -8,6 +8,14 @@ exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = `
 <!-- /wp:buttons -->"
 `;
 
+exports[`Buttons dismisses link editor when escape is pressed 1`] = `
+"<!-- wp:buttons -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button -->
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">WordPress</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;
+
 exports[`Buttons has focus on button content 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->

diff --git a/packages/e2e-tests/specs/editor/blocks/buttons.test.js b/packages/e2e-tests/specs/editor/blocks/buttons.test.js
@@ -20,6 +20,16 @@ describe( 'Buttons', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'dismisses link editor when escape is pressed', async () => {
+		// Regression: https://github.com/WordPress/gutenberg/pull/19885
+		await insertBlock( 'Buttons' );
+		await pressKeyWithModifier( 'primary', 'k' );
+		await page.keyboard.press( 'Escape' );
+		await page.keyboard.type( 'WordPress' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	it( 'can jump to the link editor using the keyboard shortcut', async () => {
 		await insertBlock( 'Buttons' );
 		await page.keyboard.type( 'WordPress' );

diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
@@ -9,6 +9,7 @@ import {
 	insertBlock,
 	pressKeyWithModifier,
 	setUpResponseMocking,
+	clickBlockToolbarButton,
 } from '@wordpress/e2e-test-utils';
 
 async function mockPagesResponse( pages ) {
@@ -132,6 +133,23 @@ describe( 'Navigation', () => {
 		// an issue where the block appender requires two clicks.
 		await page.click( '.wp-block-navigation .block-list-appender' );
 
+		// After adding a new block, search input should be shown immediately.
+		// Verify that Escape would close the popover.
+		// Regression: https://github.com/WordPress/gutenberg/pull/19885
+		const isInURLInput = await page.evaluate( () => (
+			!! document.activeElement.closest( '.block-editor-url-input' )
+		) );
+		expect( isInURLInput ).toBe( true );
+		await page.keyboard.press( 'Escape' );
+		const isInLinkRichText = await page.evaluate( () => (
+			document.activeElement.classList.contains( 'rich-text' ) &&
+			!! document.activeElement.closest( '.block-editor-block-list__block' )
+		) );
+		expect( isInLinkRichText ).toBe( true );
+
+		// Now, trigger the link dialog once more.
+		await clickBlockToolbarButton( 'Link' );
+
 		// For the second nav link block use an existing internal page.
 		// Mock the api response so that it's consistent.
 		await mockSearchResponse( [ { title: 'Contact Us', slug: 'contact-us' } ] );