diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 14eca7b5c1dcbd..6581f1180a91bb 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -187,14 +187,22 @@ function LinkControl( { isEndingEditWithFocus.current = false; }, [ isEditingLink ] ); - /** - * If the value's `text` property changes then sync this - * back up with state. - */ useEffect( () => { + /** + * If the value's `text` property changes then sync this + * back up with state. + */ if ( value?.title && value.title !== internalTextValue ) { setInternalTextValue( value.title ); } + + /** + * Update the state value internalInputValue if the url value changes + * for example when clicking on another anchor + */ + if ( value?.url ) { + setInternalInputValue( value.url ); + } }, [ value ] ); /** diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 547caa74e955a8..f50481c32c1baf 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -60,7 +60,10 @@ class URLInput extends Component { componentDidUpdate( prevProps ) { const { showSuggestions, selectedSuggestion } = this.state; - const { value } = this.props; + const { + value, + __experimentalShowInitialSuggestions = false, + } = this.props; // only have to worry about scrolling selected suggestion into view // when already expanded @@ -84,12 +87,19 @@ class URLInput extends Component { }, 100 ); } - // Only attempt an update on suggestions if the input value has actually changed. + // Update suggestions when the value changes if ( prevProps.value !== value && - this.shouldShowInitialSuggestions() + ! this.props.disableSuggestions && + ! this.isUpdatingSuggestions ) { - this.updateSuggestions(); + if ( value?.length ) { + // If the new value is not empty we need to update with suggestions for it + this.updateSuggestions( value ); + } else if ( __experimentalShowInitialSuggestions ) { + // If the new value is empty and we can show initial suggestions, then show initial suggestions + this.updateSuggestions(); + } } }