Fix attempting to sync state in controlled Link Control

[getdave]

In packages/block-editor/src/components/link-control/use-internal-input-value.js we are syncing internal state back up with any changes to the controlled value.

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

Lines 11 to 19 in a1f2679

	useEffect( () => {
	/**
	* If the value changes then sync this
	* back up with state.
	*/
	if ( value && value !== internalInputValue ) {
	setInternalInputValue( value );
	}
	}, [ value ] );

The effect omits a dependency here of internalInputValue and reinstating it will cause a bug whereby you cannot modify the value of the inputs because they will be immediately synced back up with the controlled value.

I believe this code was added based on a bug whereby:

• you change an input value
• you modify the controlled value (for example when the LinkControl component remains mounted by receives a new value)
• the input does not reflect the new controlled value

This was happening when you clicked around between Links on a RichText field. It was fixed by passing a unique key to each instance of the component so perhaps this fix is no longer needed.

Alternatively we need a smarter way of going about this.

---

Originally discovered in #48722

[getdave]

@kevin940726 I remember discussing this with you in the past. We added #34742 to fix the original issue.

Do you think we can safety remove the offending code?

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

Lines 11 to 19 in a1f2679

	useEffect( () => {
	/**
	* If the value changes then sync this
	* back up with state.
	*/
	if ( value && value !== internalInputValue ) {
	setInternalInputValue( value );
	}
	}, [ value ] );

[getdave]

@kevin940726 Here is a test that illustrates the scenario:

it.only( '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 originall 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'
	);
} );