feat(SearchField): WEB-2317 Search field empty suggestion and improvements #1473
Conversation
Marcosld
requested review from
AlexandraGallipoliRodrigues,
atabel and
pladaria
Marcosld
changed the title
|
Size stats
|
There was a problem hiding this comment.
This is my last pr with import sorting XD
| boxShadow: | ||
| '0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)', | ||
| background: 'white', | ||
| boxSizing: 'border-box', |
There was a problem hiding this comment.
Easier to set a fixed width without having to take padding in account
| </div> | ||
| )} | ||
| renderSuggestionsContainer={(options) => { | ||
| if (!isEmptyCase && options.children === null) { |
There was a problem hiding this comment.
I had to add this because of the padding. An empty container was rendered when there were no options
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit ce05d90. |
|
Accessibility report ℹ️ You can run this locally by executing |
|
Screenshot tests report ✔️ All passing |
| return allSuggestions.filter((item) => item.toLowerCase().includes(value.toLowerCase())); | ||
| }; | ||
|
|
||
| test('Show show suggestions on focus when shouldShowSuggestions is "focus"', async () => { |
There was a problem hiding this comment.
| test('Show show suggestions on focus when shouldShowSuggestions is "focus"', async () => { | |
| test('Should show suggestions on focus when shouldShowSuggestions is "focus"', async () => { |
| didClearFieldRef.current = false; | ||
| inputRef?.current?.blur(); | ||
| inputRef?.current?.focus(); |
There was a problem hiding this comment.
can't we execute this on clearInput callback instead of using an effect?
maybe something like this:
const clearInput = React.useCallback(() => {
flushSync(() => {
handleChangeValue('', '');
if (inputRef.current) {
onChange?.(createChangeEvent(inputRef.current, ''));
}
});
inputRef.current?.blur();
inputRef.current?.focus();
}, [handleChangeValue, onChange]);| {texts.searchFieldSuggestionsEmptyCase || | ||
| t(tokens.searchFieldSuggestionsEmptyCase)} |
There was a problem hiding this comment.
maybe this should be configurable at field level
| setIsEmptyCase(matchedSuggestions.length === 0); | ||
| setSuggestions(matchedSuggestions); |
There was a problem hiding this comment.
isn't this repeated state? you don't need an extra state for this. isEmptyCase state is derived from suggestions state:
const isEmptyCase = suggestions.length === 0
No description provided.