Block Editor: Handle LinkControl submission via form handler (#19651)

* Block Editor: Handle LinkControl submission via form handler * E2E Tests: Unskip intermittent buttons test failure
WordPress · Jan 20, 2020 · 80824d7 · 80824d7
1 parent 5ba3976
commit 80824d7
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
@@ -1,7 +1,7 @@
-
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { LEFT,
@@ -45,21 +45,24 @@ const LinkControlSearchInput = ( {
 	onReset,
 	showInitialSuggestions,
 } ) => {
+	const [ selectedSuggestion, setSelectedSuggestion ] = useState();
+
 	const selectItemHandler = ( selection, suggestion ) => {
 		onChange( selection );
-
-		if ( suggestion ) {
-			onSelect( suggestion );
-		}
+		setSelectedSuggestion( suggestion );
 	};
 
-	const stopFormEventsPropagation = ( event ) => {
+	function selectSuggestionOrCurrentInputValue( event ) {
+		// Avoid default forms behavior, since it's being handled custom here.
 		event.preventDefault();
-		event.stopPropagation();
-	};
+
+		// Interpret the selected value as either the selected suggestion, if
+		// exists, or otherwise the current input value as entered.
+		onSelect( selectedSuggestion || { url: value } );
+	}
 
 	return (
-		<form onSubmit={ stopFormEventsPropagation }>
+		<form onSubmit={ selectSuggestionOrCurrentInputValue }>
 			<URLInput
 				className="block-editor-link-control__search-input"
 				value={ value }

diff --git a/packages/block-editor/src/components/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js
@@ -17,7 +17,6 @@ import {
 export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = false, onClick, isURL = false, searchTerm = '' } ) => {
 	return (
 		<Button
-			type="submit"
 			{ ...itemProps }
 			onClick={ onClick }
 			className={ classnames( 'block-editor-link-control__search-item', {

diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
@@ -537,6 +537,7 @@ describe( 'Selecting links', () => {
 
 			// Search Input UI
 			const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+			const form = container.querySelector( 'form' );
 
 			// Simulate searching for a term
 			act( () => {
@@ -588,6 +589,9 @@ describe( 'Selecting links', () => {
 			act( () => {
 				Simulate.keyDown( searchInput, { keyCode: ENTER } );
 			} );
+			act( () => {
+				Simulate.submit( form );
+			} );
 
 			// Check that the suggestion selected via is now shown as selected
 			const currentLink = container.querySelector( '.block-editor-link-control__search-item.is-current' );

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
@@ -3,7 +3,7 @@
 exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">WordPress</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\" href=\\"https://www.wordpress.org/\\" title=\\"\\">WordPress</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;

diff --git a/packages/e2e-tests/specs/editor/blocks/buttons.test.js b/packages/e2e-tests/specs/editor/blocks/buttons.test.js
@@ -20,9 +20,7 @@ describe( 'Buttons', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	// Todo: Fix this intermittent test.
-	// eslint-disable-next-line jest/no-disabled-tests
-	it.skip( 'can jump to the link editor using the keyboard shortcut', async () => {
+	it( 'can jump to the link editor using the keyboard shortcut', async () => {
 		await insertBlock( 'Buttons' );
 		await page.keyboard.type( 'WordPress' );
 		await pressKeyWithModifier( 'primary', 'k' );

diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
@@ -52,6 +52,9 @@ async function updateActiveNavigationLink( { url, label } ) {
 		await page.type( 'input[placeholder="Search or type url"]', url );
 		// Wait for the autocomplete suggestion item to appear.
 		await page.waitForXPath( `//span[@class="block-editor-link-control__search-item-title"]/mark[text()="${ url }"]` );
+		// Navigate to the first suggestion.
+		await page.keyboard.press( 'ArrowDown' );
+		// Select the suggestion.
 		await page.keyboard.press( 'Enter' );
 	}
 
@@ -138,12 +141,5 @@ describe( 'Navigation', () => {
 
 		// Expect a Navigation Block with two Navigation Links in the snapshot.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// TODO - this is needed currently because when adding a link using the suggestion list,
-		// a submit button is used. The form that the submit button is in is unmounted when submission
-		// occurs, resulting in a warning 'Form submission canceled because the form is not connected'
-		// in Chrome.
-		// Ideally, the suggestions wouldn't be implemented using submit buttons.
-		expect( console ).toHaveWarned();
 	} );
 } );