Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Link UI displaying out of sync results #57522

Merged
merged 2 commits into from
Jan 8, 2024
Merged

Fix Link UI displaying out of sync results #57522

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
399163b
Remove updating suggestions state
getdave Jan 3, 2024
55bb1ef
Reset current request after completion and don’t fetch on focus
getdave Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 1 addition & 10 deletions packages/block-editor/src/components/url-input/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@ class URLInput extends Component {
this.state = {
suggestions: [],
showSuggestions: false,
isUpdatingSuggestions: false,
suggestionsValue: null,
selectedSuggestion: null,
suggestionsListboxId: '',
Expand Down Expand Up @@ -102,11 +101,7 @@ class URLInput extends Component {
}

// Update suggestions when the value changes.
if (
prevProps.value !== value &&
! this.props.disableSuggestions &&
! this.state.isUpdatingSuggestions
) {
if ( prevProps.value !== value && ! this.props.disableSuggestions ) {
if ( value?.length ) {
// If the new value is not empty we need to update with suggestions for it.
this.updateSuggestions( value );
Expand Down Expand Up @@ -183,7 +178,6 @@ class URLInput extends Component {
}

this.setState( {
isUpdatingSuggestions: true,
selectedSuggestion: null,
loading: true,
} );
Expand All @@ -203,7 +197,6 @@ class URLInput extends Component {

this.setState( {
suggestions,
isUpdatingSuggestions: false,
suggestionsValue: value,
loading: false,
showSuggestions: !! suggestions.length,
Expand Down Expand Up @@ -235,7 +228,6 @@ class URLInput extends Component {
}

this.setState( {
isUpdatingSuggestions: false,
loading: false,
} );
} );
Expand All @@ -258,7 +250,6 @@ class URLInput extends Component {
if (
value &&
! disableSuggestions &&
! this.state.isUpdatingSuggestions &&
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This onFocus handler is the only place where state.isUpdatingSuggestions does something useful: it prevents the REST request from being triggered on focus when there is another one already running.

Could be replaced with checking this.suggestionsRequest === null. But first we need to start resetting this.suggestionsRequest back to null when the request is finished. That's not currently done.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've used Promise.finally() to reset this.suggestionsRequest to null and then conditionalised the focus logic based on that.

! ( suggestions && suggestions.length )
) {
// Ensure the suggestions are updated with the current input value.
Expand Down