[$50] Improve User Handle autocomplete

[maxceem]

Instead of this when we press Enter we would like the current value to be applied and suggestion list closed.
To select any value form the suggestion we should press Down Key to move to the list.

Can we achieve this? Or is there any other way to handle this nicely. The main aim if we type something and press Enter the filter should be done by what we type, not by the first suggestion. But we should be still able to select any suggestion using keyboard.

[maxceem]

This issue looks like not easy to implement as I've got the next response:

Currently I don't see a way to implement the needed behavior except rewriting the component from scratch without using react-select.
They have an open issue about this behavior in react-select repo
JedWatson/react-select#2848
But considering this issue is almost 3 years old I doubt it will be fixed any time soon.
Also the default key to close suggestions list is Escape.
So first a user types in some text in search field, then a suggestions list pops up and then the user either can press Down/Up/Enter keys to select the correct suggestion or press Escape key to close suggestions list. Isn't this almost the same as the described behavior?

[maxceem]

@MadOPcode works almost like needed, but found a few issues:

1. [critical] If enter some word that doesn't have suggestions, then I cannot search by it by pressing Enter, for example, enter mt:

   

   • Creatable feature of react-select could solve it https://react-select.com/creatable

2. [nice to have, but not critical] If enter something and unfocus field, can we also run searching? Not only on Enter? For example, I enter maxceem then click outside, the text maxceem staus in the field but the search is not performed.

   

3. [Not critical, just if you see how to fix it.] When I type something and the request is sent to the server (loading) if I click Enter before loading is finished the search would not start. Is it hard to make it so we can press Enter and search starts by what we already enter even during loading suggestions?

   • The same for unfocus. If I type something and without waiting for loading suggestions click outside, the focus is lost, suggestions are not shown anymore, I can see what I enter, but search didn't start.

[MadOPcode]

1. If enter some word that doesn't have suggestions, then I cannot search by it by pressing Enter

For words less than 3 characters the request to the server simly is not sent and the suggestions are always empty. I tried to prevent some server requests this way. Also if I enter "mt" I see no suggestions (as expected) and then if I press Enter the value gets selected fine so I cannot reproduce the bug. Just in case my latest commit is b2f5333...

[MadOPcode]

Created a PR #41.

[maxceem]

Paid via https://www.topcoder.com/challenges/e118f945-1ae1-4bf2-99e2-70fd9735cb75

[sandhiyakavi]

@maxceem At the moment, I am not getting suggestion for any text I entered. It is getting loaded and displaying 'No Suggestions'. Is it expected?

[maxceem]

@sandhiyakavi I guess your user doesn't have permissions to get suggestions from the Member Service. I don't remember exact roles which has permissions, though admins for sure have it.

[sandhiyakavi]

@maxceem I am using Booking Manager user. Wasn't it supposed to have all privileges of Admin regarding Taas app.

[sandhiyakavi]

Verified on dev Env.

1. When Enter pressed, the currently typed value is searched and suggestions are getting closed.
2. Able to choose the suggestions by down arrow button.
3. Able to search by word that doesn't have suggestions.
4. Able to search if entered some text and unfocus it.
   

The issue with the Booking Manager role is tracked separately here #51

[sandhiyakavi]

Verified on PRod Env with @nkumar-topcoder