react-autosuggest icon indicating copy to clipboard operation
react-autosuggest copied to clipboard

Handling empty suggestion list

Open FatehAK opened this issue 4 years ago • 8 comments

How do show feedback to the user when the suggestion list is empty? I tried the codepen example you provided but it doesn't work sometimes when you type fast and delete fast. Does the library support empty feedback?

FatehAK avatar Apr 25 '20 18:04 FatehAK

what do you mean by feedback?

decimoseptimo avatar Apr 25 '20 23:04 decimoseptimo

No results or something like that

FatehAK avatar Apr 28 '20 18:04 FatehAK

I assume you meant showing feedback in the suggestion list where the results would normally appear.

From a UI standpoint, it could be confusing to display a special result (the feedback) that isn't supposed to be selected, in the way regular results are. Have you seen such inplementation in the wild, where? perhaps showing the feedback below the input field should do fine.

decimoseptimo avatar Apr 28 '20 18:04 decimoseptimo

What kind of feedback you want to show. How it should look?

aberezkin avatar May 11 '20 17:05 aberezkin

@aberezkin The feedback shown inside the suggestion and one more suggestion is, to add loading indication inside suggestion box.

anjumpaul avatar Jun 15 '20 18:06 anjumpaul

There is a way to show the loading process without being too hacky. A loading flag should be switched on when the suggestions are fetched inside the onSuggestionsFetchRequested and turned off when they are successfully fetched. The loading indicator can be displayed after the search box. It would look a little messy IMHO to add the indication inside the box, specially with the value also there.

dsaw avatar Jun 20 '20 16:06 dsaw

I think all we need here is a prop for something like showSuggestionsWhenEmpty so we can add some logic to renderSuggestionsContainer to check if suggestions.length === 0.

mmmeff avatar Aug 11 '21 00:08 mmmeff

The only idea I have now would be to force suggestions to never be empty (with some kind of dummy suggestion value), and then check for this in renderSuggestionsContainer as @mmmeff mentioned.

jfhidakatsu avatar Feb 01 '22 22:02 jfhidakatsu