[UX] Categories input field: provide feedback in the autocomplete list

• Type: Technical Task
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Documents & Media
• Labels: None
• Sprint: Col | Sprint 4 | Nov19 - Nov30, Col | Sprint 5 | Dec3 - Dec14, Col | Sprint 6 | Dec17 - Jan18, Col | Sprint 7 | Jan22 - Feb1, Col | Sprint 8 | Feb4 - Feb15, Col | Sprint 9 | Feb18 - Mar5, Col | Sprint10 | Mar6 - Mar15, Col | Sprint11 | Mar19 - Mar28, Col | Sprint 12 | Apr1 - Apr5

CONTEXT

Regarding the new stories to improve the selection of categories in Portal 7.2. The Collaboration Team would like to contribute to Clay components with a string validation interaction when the user types using a multi-select.

SUMMARY

• Manage different states (loading, no results, match)
• Improve Unfocus state
• Add a placeholder within the suggestion panel

RESOURCES

• Discussion Document
• Figma

New Interaction States

While a user is typing, the system suggests existing items without the user needing to type them in full.

Results state

 

However, a user could introduce a string that has no matches and the system gives feedback not showing the suggestion panel. We propose to add two more interaction states to cover this case and when the system is searching for results.  

Loading

Between the suggestions are shown and the user is typing, the user must be informed that a search process has been triggered and is working looking for matches.

Loading state

 

• If the suggestions are shown the loading state must not appear again, just if the time is more than 0.5s

No results

If the system doesn’t find any matches, the system shows a message saying “No results found”.

 

No results state

Clear Input on Unfocus

If the focus is lost the input must be cleared keeping the labels already introduced.

 

The user types and the suggestions panel shows

 

On unfocus, the input is cleared keeping the label “Places”