diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 142ffd6db1e503..0e4273f6715b10 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -137,17 +137,18 @@ function LinkControl( { const isEndingEditWithFocus = useRef( false ); const [ settingsOpen, setSettingsOpen ] = useState( false ); + const [ newValue, setNewValue ] = useState( value ); const [ internalUrlInputValue, setInternalUrlInputValue ] = - useInternalInputValue( value?.url || '' ); + useInternalInputValue( newValue?.url || '' ); const [ internalTextInputValue, setInternalTextInputValue ] = - useInternalInputValue( value?.title || '' ); + useInternalInputValue( newValue?.title || '' ); const [ isEditingLink, setIsEditingLink ] = useState( forceIsEditingLink !== undefined ? forceIsEditingLink - : ! value || ! value.url + : ! newValue || ! newValue.url ); const { createPage, isCreatingPage, errorMessage } = @@ -192,7 +193,7 @@ function LinkControl( { isEndingEditWithFocus.current = false; }, [ isEditingLink, isCreatingPage ] ); - const hasLinkValue = value?.url?.trim()?.length > 0; + const hasLinkValue = newValue?.url?.trim()?.length > 0; /** * Cancels editing state and marks that focus may need to be restored after @@ -208,24 +209,23 @@ function LinkControl( { }; const handleSelectSuggestion = ( updatedValue ) => { - onChange( { + const valueToApplyAndFormat = { ...updatedValue, title: internalTextInputValue || updatedValue?.title, - } ); + }; + setNewValue( valueToApplyAndFormat ); + onChange( valueToApplyAndFormat ); stopEditing(); }; const handleSubmit = () => { - if ( - currentUrlInputValue !== value?.url || - internalTextInputValue !== value?.title - ) { - onChange( { - ...value, - url: currentUrlInputValue, - title: internalTextInputValue, - } ); - } + const valueToSubmit = { + ...newValue, + url: currentUrlInputValue, + title: internalTextInputValue, + }; + setNewValue( valueToSubmit ); + onChange( valueToSubmit ); stopEditing(); }; @@ -240,19 +240,13 @@ function LinkControl( { } }; - const resetInternalValues = () => { - setInternalUrlInputValue( value?.url ); - setInternalTextInputValue( value?.title ); - }; - const handleCancel = ( event ) => { event.preventDefault(); event.stopPropagation(); - // Ensure that any unsubmitted input changes are reset. - resetInternalValues(); + setNewValue( value ); - if ( hasLinkValue ) { + if ( value?.url?.trim()?.length > 0 ) { // If there is a link then exist editing mode and show preview. stopEditing(); } else { @@ -268,7 +262,7 @@ function LinkControl( { const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length; const shownUnlinkControl = - onRemove && value && ! isEditingLink && ! isCreatingPage; + onRemove && newValue && ! isEditingLink && ! isCreatingPage; const showSettings = !! settings?.length; @@ -277,7 +271,7 @@ function LinkControl( { // See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927. const showTextControl = hasLinkValue && hasTextControl; - const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage; + const isEditing = ( isEditingLink || ! newValue ) && ! isCreatingPage; return (
setIsEditingLink( true ) } hasRichPreviews={ hasRichPreviews } hasUnlinkControl={ shownUnlinkControl } @@ -356,9 +350,9 @@ function LinkControl( { setInternalTextInputValue } handleSubmitWithEnter={ handleSubmitWithEnter } - value={ value } + value={ newValue } settings={ settings } - onChange={ onChange } + onChange={ setNewValue } /> ) }