Refactor around missing dependency in Link Control internal value syn…

…c effect (#49509)

* Remove syncing

* Add test coverage

* Reinstate state “reset” but avoid passing internalInputValue as dep to effect

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

---------

Co-authored-by: Ben Dwyer <ben@scruffian.com>

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

@@ -2235,6 +2235,48 @@ describe( 'Controlling link title text', () => {
 			screen.queryByRole( 'textbox', { name: 'Text' } )
 		).not.toBeInTheDocument();
 	} );
+
+	it( 'should reset state on value change', async () => {
+		const user = userEvent.setup();
+		const textValue = 'My new text value';
+		const mockOnChange = jest.fn();
+
+		const { rerender } = render(
+			<LinkControl
+				value={ selectedLink }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		await toggleSettingsDrawer( user );
+
+		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
+
+		expect( textInput ).toBeVisible();
+
+		await user.clear( textInput );
+		await user.keyboard( textValue );
+
+		// Was originally title: 'Hello Page', but we've changed it.
+		rerender(
+			<LinkControl
+				value={ {
+					...selectedLink,
+					title: 'Something else',
+				} }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		// The text input should not be showing as the form is submitted.
+		expect( screen.queryByRole( 'textbox', { name: 'Text' } ) ).toHaveValue(
+			'Something else'
+		);
+	} );
 } );
 
 async function toggleSettingsDrawer( user ) {

packages/block-editor/src/components/link-control/use-internal-input-value.js

@@ -8,14 +8,15 @@ export default function useInternalInputValue( value ) {
 		value || ''
 	);
 
+	// If the value prop changes, update the internal state.
 	useEffect( () => {
-		/**
-		 * If the value changes then sync this
-		 * back up with state.
-		 */
-		if ( value && value !== internalInputValue ) {
-			setInternalInputValue( value );
-		}
+		setInternalInputValue( ( prevValue ) => {
+			if ( value && value !== prevValue ) {
+				return value;
+			}
+
+			return prevValue;
+		} );
 	}, [ value ] );
 
 	return [ internalInputValue, setInternalInputValue ];