From 0cea868afc4b0a4a7db07f3c0fb718d2603dd351 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 16 Nov 2022 12:54:29 +0100 Subject: [PATCH 1/9] URLInput: reorganize the renderSuggestion condition --- .../src/components/url-input/index.js | 75 ++++++++----------- 1 file changed, 31 insertions(+), 44 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 3858f3983103a9..a39bf94555726c 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -503,6 +503,10 @@ class URLInput extends Component { loading, } = this.state; + if ( ! showSuggestions || suggestions.length === 0 ) { + return null; + } + const suggestionsListProps = { id: suggestionsListboxId, ref: this.autocompleteRef, @@ -519,11 +523,7 @@ class URLInput extends Component { }; }; - if ( - isFunction( renderSuggestions ) && - showSuggestions && - !! suggestions.length - ) { + if ( isFunction( renderSuggestions ) ) { return renderSuggestions( { suggestions, selectedSuggestion, @@ -537,46 +537,33 @@ class URLInput extends Component { } ); } - if ( - ! isFunction( renderSuggestions ) && - showSuggestions && - !! suggestions.length - ) { - return ( - -
- { suggestions.map( ( suggestion, index ) => ( - - ) ) } -
- - ); - } - return null; + ) } + onClick={ () => this.handleOnClick( suggestion ) } + > + { suggestion.title } + + ) ) } + + + ); } } From 17ef92da965fce5be27b04b4f8ea492be3aeed8c Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 16 Nov 2022 12:57:35 +0100 Subject: [PATCH 2/9] URLInput: simplify shouldShowInitialSuggestions which always runs with initial state --- packages/block-editor/src/components/url-input/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index a39bf94555726c..65cc77ebd1ba5a 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -133,14 +133,10 @@ class URLInput extends Component { } shouldShowInitialSuggestions() { - const { suggestions } = this.state; const { __experimentalShowInitialSuggestions = false, value } = this.props; return ( - ! this.isUpdatingSuggestions && - __experimentalShowInitialSuggestions && - ! ( value && value.length ) && - ! ( suggestions && suggestions.length ) + __experimentalShowInitialSuggestions && ! ( value && value.length ) ); } From a7b13b23f71bc9d31dde97ea990add1040cab259 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 16 Nov 2022 13:19:54 +0100 Subject: [PATCH 3/9] URLInput: don't updateSuggestions on change, it's done by cDU lifecycle --- packages/block-editor/src/components/url-input/index.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 65cc77ebd1ba5a..cab5a2b2c267ed 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -237,12 +237,7 @@ class URLInput extends Component { } onChange( event ) { - const inputValue = event.target.value; - - this.props.onChange( inputValue ); - if ( ! this.props.disableSuggestions ) { - this.updateSuggestions( inputValue ); - } + this.props.onChange( event.target.value ); } onFocus() { From 44014861753c5620564fb69835435fb63a52e439 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 16 Nov 2022 13:03:38 +0100 Subject: [PATCH 4/9] URLInput: cancel suggestionsRequest when updated value means no request --- .../src/components/url-input/index.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index cab5a2b2c267ed..bcbcdb7e2bfce9 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -60,6 +60,7 @@ class URLInput extends Component { this.suggestionNodes = []; + this.suggestionsRequest = null; this.isUpdatingSuggestions = false; this.state = { @@ -123,7 +124,7 @@ class URLInput extends Component { componentWillUnmount() { this.suggestionsRequest?.cancel?.(); - delete this.suggestionsRequest; + this.suggestionsRequest = null; } bindSuggestionNode( index ) { @@ -166,6 +167,9 @@ class URLInput extends Component { ! isInitialSuggestions && ( value.length < 2 || ( ! handleURLSuggestions && isURL( value ) ) ) ) { + this.suggestionsRequest?.cancel?.(); + this.suggestionsRequest = null; + this.setState( { showSuggestions: false, selectedSuggestion: null, @@ -223,12 +227,14 @@ class URLInput extends Component { this.isUpdatingSuggestions = false; } ) .catch( () => { - if ( this.suggestionsRequest === request ) { - this.setState( { - loading: false, - } ); - this.isUpdatingSuggestions = false; + if ( this.suggestionsRequest !== request ) { + return; } + + this.setState( { + loading: false, + } ); + this.isUpdatingSuggestions = false; } ); // Note that this assignment is handled *before* the async search request From 24dd6bb55ddf23269b78e66338f548ddcde88115 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 16 Nov 2022 13:11:03 +0100 Subject: [PATCH 5/9] URLInput: set empty suggestions when updated value means no request --- packages/block-editor/src/components/url-input/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index bcbcdb7e2bfce9..30712db5146846 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -171,6 +171,7 @@ class URLInput extends Component { this.suggestionsRequest = null; this.setState( { + suggestions: [], showSuggestions: false, selectedSuggestion: null, loading: false, From fb63445d35e2ab9e42a772817da35161805d507c Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 16 Nov 2022 13:08:05 +0100 Subject: [PATCH 6/9] URLInput: move isUpdatingSuggestions to state --- .../block-editor/src/components/url-input/index.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 30712db5146846..dd4b937b899b55 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -61,13 +61,12 @@ class URLInput extends Component { this.suggestionNodes = []; this.suggestionsRequest = null; - this.isUpdatingSuggestions = false; this.state = { suggestions: [], showSuggestions: false, + isUpdatingSuggestions: false, selectedSuggestion: null, - suggestionsListboxId: '', suggestionOptionIdPrefix: '', }; @@ -104,7 +103,7 @@ class URLInput extends Component { if ( prevProps.value !== value && ! this.props.disableSuggestions && - ! this.isUpdatingSuggestions + ! this.state.isUpdatingSuggestions ) { if ( value?.length ) { // If the new value is not empty we need to update with suggestions for it. @@ -180,9 +179,8 @@ class URLInput extends Component { return; } - this.isUpdatingSuggestions = true; - this.setState( { + isUpdatingSuggestions: true, selectedSuggestion: null, loading: true, } ); @@ -202,6 +200,7 @@ class URLInput extends Component { this.setState( { suggestions, + isUpdatingSuggestions: false, loading: false, showSuggestions: !! suggestions.length, } ); @@ -225,7 +224,6 @@ class URLInput extends Component { 'assertive' ); } - this.isUpdatingSuggestions = false; } ) .catch( () => { if ( this.suggestionsRequest !== request ) { @@ -233,9 +231,9 @@ class URLInput extends Component { } this.setState( { + isUpdatingSuggestions: false, loading: false, } ); - this.isUpdatingSuggestions = false; } ); // Note that this assignment is handled *before* the async search request @@ -256,7 +254,7 @@ class URLInput extends Component { if ( value && ! disableSuggestions && - ! this.isUpdatingSuggestions && + ! this.state.isUpdatingSuggestions && ! ( suggestions && suggestions.length ) ) { // Ensure the suggestions are updated with the current input value. From 3ff9d20160ee0579e3f22ce970a74c489ba17c97 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 16 Nov 2022 13:13:55 +0100 Subject: [PATCH 7/9] URLInput: put the current input value to state, in sync with search results --- .../block-editor/src/components/url-input/index.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index dd4b937b899b55..0eb97730e15d18 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -66,6 +66,7 @@ class URLInput extends Component { suggestions: [], showSuggestions: false, isUpdatingSuggestions: false, + suggestionsValue: null, selectedSuggestion: null, suggestionsListboxId: '', suggestionOptionIdPrefix: '', @@ -172,6 +173,7 @@ class URLInput extends Component { this.setState( { suggestions: [], showSuggestions: false, + suggestionsValue: value, selectedSuggestion: null, loading: false, } ); @@ -201,6 +203,7 @@ class URLInput extends Component { this.setState( { suggestions, isUpdatingSuggestions: false, + suggestionsValue: value, loading: false, showSuggestions: !! suggestions.length, } ); @@ -486,13 +489,12 @@ class URLInput extends Component { const { className, __experimentalRenderSuggestions: renderSuggestions, - value = '', - __experimentalShowInitialSuggestions = false, } = this.props; const { showSuggestions, suggestions, + suggestionsValue, selectedSuggestion, suggestionsListboxId, suggestionOptionIdPrefix, @@ -527,9 +529,8 @@ class URLInput extends Component { buildSuggestionItemProps, isLoading: loading, handleSuggestionClick: this.handleOnClick, - isInitialSuggestions: - __experimentalShowInitialSuggestions && - ! ( value && value.length ), + isInitialSuggestions: ! suggestionsValue?.length, + currentInputValue: suggestionsValue, } ); } From 3656e40a6aedc489e2a94eb2f29a5c984482dcab Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 16 Nov 2022 13:58:41 +0100 Subject: [PATCH 8/9] LinkControl: don't send currentInputValue to URLInput, it already does it internally --- packages/block-editor/src/components/link-control/README.md | 2 +- .../block-editor/src/components/link-control/search-input.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md index 3d3dd7b0aaa210..c3fc7262adb956 100644 --- a/packages/block-editor/src/components/link-control/README.md +++ b/packages/block-editor/src/components/link-control/README.md @@ -322,10 +322,10 @@ The following properties are provided by URLInput: - suggestions - selectedSuggestion - suggestionsListProps +- currentInputValue The following extra properties are provided by LinkControlSearchInput: -- currentInputValue - createSuggestionButtonText - handleSuggestionClick - instanceId diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js index cabe52f907469e..95c925a45d8303 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -81,7 +81,6 @@ const LinkControlSearchInput = forwardRef( ...props, instanceId, withCreateSuggestion, - currentInputValue: value, createSuggestionButtonText, suggestionsQuery, handleSuggestionClick: ( suggestion ) => { From 4459a77ba494c3d0e2c3e51794dc3cb280956473 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Mon, 28 Nov 2022 09:04:23 +0100 Subject: [PATCH 9/9] URLInput: mention the currentInputValue param for renderSuggestions in block-editor changelog --- packages/block-editor/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 4d37bf5737599c..0ce86cc9cb1103 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancement + +- `URLInput`: the `renderSuggestions` callback prop now receives `currentInputValue` as a new parameter ([45806](https://github.com/WordPress/gutenberg/pull/45806)). + ## 10.5.0 (2022-11-16) ### Enhancement