feat(autocomplete simple): react component for autocomplete - simple variation

[juanigalan91]

Created the first version of the autocomplete component. it supports:

• Filter options based on a given input
• Control over the value, options, and when the suggestions are displayed or not
• Navigate between options using the keyboard
• Selecting one option either by clicking or pressing Enter

Simple usage

Keyboard navigation

No results

Note: this variation may need css changes since the no results label is a little bit more gray on the mockups.

Leave and come back

Side effects:

• ListItem: in order to allow the keyboard navigation, it was necessary to add some sort of mechanism to ListItem in order to, from the outside, control which ListItem is highlighted. To do that, we can create a new prop called isHighlighted and control the boolean from the outside
• TextField: added textFieldRef in order to forward the ref, since Dropdown needs that reference to display the popover. Also, TextField did not allow to override onFocus and onBlur, so now, when the onFocus and onBlur are executed inside the component, they will check whether there are functions passed in as props and they will be executed first. inputRef was also added since it is necessary to have a reference to the actual input, and not the wrapper as textFieldRef did.

[gcornut]

Good job on this component 👍

[matmkian]

I don't understand why we don't focus the list and focus elements on keyboard navigation -> check what have been done in angularjs on dropdown.

[juanigalan91]

We can discuss it in our meeting today!

[juanigalan91]

Just for visibility purposes, we discussed and the reason why we need the isHighlighted prop is that if we move the focus to the list, we loose it on the text field, so the user cannot continue typing. By taking this approach, we can "highlight" a result while maintaining focus on the text field

[FlorentDinet]

Nice work !
My only doubt come from the "no result" which is indeed to close to an actual "suggestion item"

I'll suggest to display nothing, when there is no suggestion

[juanigalan91]

Awesome, I can definitely do that!

[FlorentDinet]

Nice
I did catch something when hitting backspace key :

losing focus on backspace

[juanigalan91]

@FlorentDinet fixed ! thanks for the catch !

[FlorentDinet]

ok, last thing I saw is that we're kind of "stuck" in the field with keyboard navigation:

• can't hit "tab" to focus next input
• can't hit "shift+tab" to focus previous input

I'd understand if tab was used to navigate between suggestions but that's not the case

Anyway it's not blocking, just icing on the cake

[juanigalan91]

@FlorentDinet got it, on my end I see that as a blocker, it is definitely not a good UX. It was a quick fix, so there it is! would you mind trying again ?

[FlorentDinet]

👌