From eaed518cc137b22368fa095681a019a2c7d0ce2f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 31 Mar 2023 11:37:45 +0100 Subject: [PATCH 1/4] Remove syncing --- .../link-control/use-internal-input-value.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) 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..99dd5a7168a941 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 @@ -1,22 +1,12 @@ /** * WordPress dependencies */ -import { useState, useEffect } from '@wordpress/element'; +import { useState } from '@wordpress/element'; export default function useInternalInputValue( value ) { const [ internalInputValue, setInternalInputValue ] = useState( value || '' ); - useEffect( () => { - /** - * If the value changes then sync this - * back up with state. - */ - if ( value && value !== internalInputValue ) { - setInternalInputValue( value ); - } - }, [ value ] ); - return [ internalInputValue, setInternalInputValue ]; } From de93909ac17f1a9a3a8bb94fbbe3faa4866298b6 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 31 Mar 2023 12:19:13 +0100 Subject: [PATCH 2/4] Add test coverage --- .../src/components/link-control/test/index.js | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) 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..4cd487999391ff 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 originall 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 ) { From 0c5f357e1b4ab59e9883b6c95765d0448aaf8ece Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 31 Mar 2023 12:19:45 +0100 Subject: [PATCH 3/4] =?UTF-8?q?Reinstate=20state=20=E2=80=9Creset=E2=80=9D?= =?UTF-8?q?=20but=20avoid=20passing=20internalInputValue=20as=20dep=20to?= =?UTF-8?q?=20effect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../link-control/use-internal-input-value.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) 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 99dd5a7168a941..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 @@ -1,12 +1,23 @@ /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; export default function useInternalInputValue( value ) { const [ internalInputValue, setInternalInputValue ] = useState( value || '' ); + // If the value prop changes, update the internal state. + useEffect( () => { + setInternalInputValue( ( prevValue ) => { + if ( value && value !== prevValue ) { + return value; + } + + return prevValue; + } ); + }, [ value ] ); + return [ internalInputValue, setInternalInputValue ]; } From a3030086955453dcfbbc3723cce7d5ae05697b01 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 21 Apr 2023 14:06:01 +0100 Subject: [PATCH 4/4] Update packages/block-editor/src/components/link-control/test/index.js --- packages/block-editor/src/components/link-control/test/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 4cd487999391ff..4e2428fc0ac3f8 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -2259,7 +2259,7 @@ describe( 'Controlling link title text', () => { await user.clear( textInput ); await user.keyboard( textValue ); - // Was originall title: 'Hello Page', but we've changed it. + // Was originally title: 'Hello Page', but we've changed it. rerender(