Try the link control in the link format (#19462)

* Block Editor: LinkControl: Allow onChange parent to manage focus

* Try the link control in the link format

Co-Authored-By: Dave Smith <getdave@users.noreply.github.com>
Co-Authored-By: Riad Benguella <benguella@gmail.com>

* Block Editor: LinkControl: Fix test case typo

Co-authored-by: Andrew Duthie <andrew@andrewduthie.com>
Co-authored-by: Dave Smith <getdavemail@gmail.com>

packages/block-editor/src/components/link-control/index.js

@@ -292,8 +292,8 @@ function LinkControl( {
 							) }
 							suggestion={ suggestion }
 							onClick={ () => {
-								stopEditing();
 								onChange( { ...value, ...suggestion } );
+								stopEditing();
 							} }
 							isSelected={ index === selectedSuggestion }
 							isURL={ manualLinkEntryTypes.includes(
@@ -318,8 +318,8 @@ function LinkControl( {
 					value={ inputValue }
 					onChange={ onInputChange }
 					onSelect={ ( suggestion ) => {
-						stopEditing();
 						onChange( { ...value, ...suggestion } );
+						stopEditing();
 					} }
 					renderSuggestions={ renderSearchResults }
 					fetchSuggestions={ getSearchHandler }

packages/block-editor/src/components/link-control/test/index.js

@@ -7,7 +7,7 @@ import { first, last, nth } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { UP, DOWN, ENTER } from '@wordpress/keycodes';
 /**
  * Internal dependencies
@@ -766,6 +766,56 @@ describe( 'Selecting links', () => {
 			}
 		);
 	} );
+
+	it( 'does not forcefully regain focus if onChange handler had shifted it', () => {
+		// Regression: Previously, there had been issues where if `onChange`
+		// would programmatically shift focus, LinkControl would try to force it
+		// back, based on its internal logic to determine whether it had focus
+		// when finishing an edit occuring _before_ `onChange` having been run.
+		//
+		// See: https://github.com/WordPress/gutenberg/pull/19462
+
+		const LinkControlConsumer = () => {
+			const focusTarget = useRef();
+
+			return (
+				<>
+					<div tabIndex={ -1 } data-expected ref={ focusTarget } />
+					<LinkControl
+						onChange={ () => focusTarget.current.focus() }
+					/>
+				</>
+			);
+		};
+
+		act( () => {
+			render( <LinkControlConsumer />, container );
+		} );
+
+		// Change value.
+		const form = container.querySelector( 'form' );
+		const searchInput = container.querySelector(
+			'input[aria-label="URL"]'
+		);
+
+		// Simulate searching for a term
+		act( () => {
+			Simulate.change( searchInput, {
+				target: { value: 'https://example.com' },
+			} );
+		} );
+		act( () => {
+			Simulate.keyDown( searchInput, { keyCode: ENTER } );
+		} );
+		act( () => {
+			Simulate.submit( form );
+		} );
+
+		const isExpectedFocusTarget = document.activeElement.hasAttribute(
+			'data-expected'
+		);
+		expect( isExpectedFocusTarget ).toBe( true );
+	} );
 } );
 
 describe( 'Addition Settings UI', () => {