-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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
URLInput: keep the search results label in sync with the results list #45806
Changes from all commits
0cea868
17ef92d
a7b13b2
4401486
24dd6bb
fb63445
3ff9d20
3656e40
4459a77
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -60,13 +60,14 @@ class URLInput extends Component { | |
|
||
this.suggestionNodes = []; | ||
|
||
this.isUpdatingSuggestions = false; | ||
this.suggestionsRequest = null; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These component instance properties are always a recipe for weird bugs since React doesn't usually observe changes in them. Maybe we should ideally get rid of them all? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
this.state = { | ||
suggestions: [], | ||
showSuggestions: false, | ||
isUpdatingSuggestions: false, | ||
suggestionsValue: null, | ||
selectedSuggestion: null, | ||
|
||
suggestionsListboxId: '', | ||
suggestionOptionIdPrefix: '', | ||
}; | ||
|
@@ -103,7 +104,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. | ||
|
@@ -123,7 +124,7 @@ class URLInput extends Component { | |
|
||
componentWillUnmount() { | ||
this.suggestionsRequest?.cancel?.(); | ||
delete this.suggestionsRequest; | ||
this.suggestionsRequest = null; | ||
} | ||
|
||
bindSuggestionNode( index ) { | ||
|
@@ -133,14 +134,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 ) | ||
); | ||
} | ||
|
||
|
@@ -170,18 +167,22 @@ class URLInput extends Component { | |
! isInitialSuggestions && | ||
( value.length < 2 || ( ! handleURLSuggestions && isURL( value ) ) ) | ||
) { | ||
this.suggestionsRequest?.cancel?.(); | ||
this.suggestionsRequest = null; | ||
|
||
this.setState( { | ||
suggestions: [], | ||
showSuggestions: false, | ||
suggestionsValue: value, | ||
selectedSuggestion: null, | ||
loading: false, | ||
} ); | ||
|
||
return; | ||
} | ||
|
||
this.isUpdatingSuggestions = true; | ||
|
||
this.setState( { | ||
isUpdatingSuggestions: true, | ||
selectedSuggestion: null, | ||
loading: true, | ||
} ); | ||
|
@@ -201,6 +202,8 @@ class URLInput extends Component { | |
|
||
this.setState( { | ||
suggestions, | ||
isUpdatingSuggestions: false, | ||
suggestionsValue: value, | ||
loading: false, | ||
showSuggestions: !! suggestions.length, | ||
} ); | ||
|
@@ -224,15 +227,16 @@ class URLInput extends Component { | |
'assertive' | ||
); | ||
} | ||
this.isUpdatingSuggestions = false; | ||
} ) | ||
.catch( () => { | ||
if ( this.suggestionsRequest === request ) { | ||
this.setState( { | ||
loading: false, | ||
} ); | ||
this.isUpdatingSuggestions = false; | ||
if ( this.suggestionsRequest !== request ) { | ||
return; | ||
} | ||
|
||
this.setState( { | ||
isUpdatingSuggestions: false, | ||
loading: false, | ||
} ); | ||
} ); | ||
|
||
// Note that this assignment is handled *before* the async search request | ||
|
@@ -241,12 +245,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() { | ||
|
@@ -258,7 +257,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. | ||
|
@@ -490,19 +489,22 @@ class URLInput extends Component { | |
const { | ||
className, | ||
__experimentalRenderSuggestions: renderSuggestions, | ||
value = '', | ||
__experimentalShowInitialSuggestions = false, | ||
} = this.props; | ||
|
||
const { | ||
showSuggestions, | ||
suggestions, | ||
suggestionsValue, | ||
selectedSuggestion, | ||
suggestionsListboxId, | ||
suggestionOptionIdPrefix, | ||
loading, | ||
} = this.state; | ||
|
||
if ( ! showSuggestions || suggestions.length === 0 ) { | ||
return null; | ||
} | ||
|
||
const suggestionsListProps = { | ||
id: suggestionsListboxId, | ||
ref: this.autocompleteRef, | ||
|
@@ -519,64 +521,46 @@ class URLInput extends Component { | |
}; | ||
}; | ||
|
||
if ( | ||
isFunction( renderSuggestions ) && | ||
showSuggestions && | ||
!! suggestions.length | ||
) { | ||
if ( isFunction( renderSuggestions ) ) { | ||
return renderSuggestions( { | ||
suggestions, | ||
selectedSuggestion, | ||
suggestionsListProps, | ||
buildSuggestionItemProps, | ||
isLoading: loading, | ||
handleSuggestionClick: this.handleOnClick, | ||
isInitialSuggestions: | ||
__experimentalShowInitialSuggestions && | ||
! ( value && value.length ), | ||
isInitialSuggestions: ! suggestionsValue?.length, | ||
currentInputValue: suggestionsValue, | ||
} ); | ||
} | ||
|
||
if ( | ||
! isFunction( renderSuggestions ) && | ||
showSuggestions && | ||
!! suggestions.length | ||
) { | ||
return ( | ||
<Popover placement="bottom" focusOnMount={ false }> | ||
<div | ||
{ ...suggestionsListProps } | ||
className={ classnames( | ||
'block-editor-url-input__suggestions', | ||
`${ className }__suggestions` | ||
) } | ||
> | ||
{ suggestions.map( ( suggestion, index ) => ( | ||
<Button | ||
{ ...buildSuggestionItemProps( | ||
suggestion, | ||
index | ||
) } | ||
key={ suggestion.id } | ||
className={ classnames( | ||
'block-editor-url-input__suggestion', | ||
{ | ||
'is-selected': | ||
index === selectedSuggestion, | ||
} | ||
) } | ||
onClick={ () => | ||
this.handleOnClick( suggestion ) | ||
return ( | ||
<Popover placement="bottom" focusOnMount={ false }> | ||
<div | ||
{ ...suggestionsListProps } | ||
className={ classnames( | ||
'block-editor-url-input__suggestions', | ||
`${ className }__suggestions` | ||
) } | ||
> | ||
{ suggestions.map( ( suggestion, index ) => ( | ||
<Button | ||
{ ...buildSuggestionItemProps( suggestion, index ) } | ||
key={ suggestion.id } | ||
className={ classnames( | ||
'block-editor-url-input__suggestion', | ||
{ | ||
'is-selected': index === selectedSuggestion, | ||
} | ||
> | ||
{ suggestion.title } | ||
</Button> | ||
) ) } | ||
</div> | ||
</Popover> | ||
); | ||
} | ||
return null; | ||
) } | ||
onClick={ () => this.handleOnClick( suggestion ) } | ||
> | ||
{ suggestion.title } | ||
</Button> | ||
) ) } | ||
</div> | ||
</Popover> | ||
); | ||
} | ||
} | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds like something that needs to be mentioned in the CHANGELOG?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I now added info to
block-editor
about theURLInput.renderSuggestions
having a newcurrentInputValue
parameter.