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 ];