🛠️ Potential Solutions

...

• We will turn the offer search editable, allow to allowing the user to type the offer name

• It cannot take much time to show the offer searched

• We have to warn the user when the offer does not exist in the list

• It needs to search in the list for every offer that contains at least three characters of the name according to what was typed

  • Backspace counts as a character too

• It should always show Sanity offer in an increasing alphabetical order.

✅ Proposed Solution

Solution #1

The first solution is allowing the offer name to be editable using a different component (AutoComplete) and when the Sanity offer is searched it will look for the offer comparing the name with what was typed.

...

This solution allows the offer name to be still editable using a TextBox and when the offer is searched it will look for the Sanity offer by comparing the name with what was typed, in another component(Select) or a List that would render according to the list of offer available.

Cons:

• Creation of more dependencies between component

• Use at least two components to do the same search instead of a specific one that does all the work

...

Test Scenario	Result	Screenshots
Show entire offers list	When selecting the Search Ofer Input show full list of Sanity offers names in a increasing alphabetical order
Show only offers with a specific character or words typed	After typing at least three characters in the Search Ofer Input that exists in some offer name Show only Sanity offers with a specific characters or words typed in a increasing alphabetical order
Show warning error for inxestent absent offer in the list	After typing at least three characters that it does not exist in any Sanity offer name in the Search Ofer Input Shows warning message: No results for "whatever was typed”