Fix the update of link and suggestions in LinkControl (#32320)

* Fix the update of link and suggestions in LinkControl When switching between two links, the LinkControl component does not unmount. The value prop will change but the component does not react to this change and does not show the updated link & suggestions. * Remove trim from function argument for updateSuggestions. Trimming gets done in the function itself, since PR #35060. * Update packages/block-editor/src/components/url-input/index.js Co-authored-by: Dave Smith <[email protected]> * Take into consideration the case when the value changes with an empty string This was removed by the first commits, but we need to take into consideration that we also want to show the initial suggestions when the new value is empty * Update packages/block-editor/src/components/url-input/index.js Co-authored-by: Dave Smith <[email protected]> Co-authored-by: Dave Smith <[email protected]>
WordPress · Nov 5, 2021 · 8053b37 · 8053b37
1 parent e4c3eb6
commit 8053b37
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git 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
@@ -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();
+			}
 		}
 	}