diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index de2d0607056173..4e2428fc0ac3f8 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/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(
+
+ );
+
+ 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(
+
+ );
+
+ // 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 ) {
diff --git a/packages/block-editor/src/components/link-control/use-internal-input-value.js b/packages/block-editor/src/components/link-control/use-internal-input-value.js
index a4d9a1a7bca118..5dd3c59f3e873a 100644
--- a/packages/block-editor/src/components/link-control/use-internal-input-value.js
+++ b/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 ];