You have an array of people. Implement the Autocomplete component using Bulma Dropdown that will suggest people matching an entered text.
The task does not have tests or a working example
- suggestions should appear after some
delay
in typing (debounce
); - the
delay
should be customizable via props; - show the list of all people when input is focused but empty (Check this to see how it can work)
- show
No matching suggestions
message if there are no people containing the entered text; - don't run filtering again if the text has not changed (pause in typing happened when the text was the same as before)
- hide suggestions on text change;
- save selected suggestion text to the input on click and close the list;
- pass selected person to the
onSelected
callback passed via props; - add an
h1
to theApp
showingName (born - died)
of the selected person orNo selected person
.
- Implement a solution following the React task guideline.
- Use the React TypeScript cheat sheet.
- Replace
<your_account>
with your Github username in the DEMO LINK and add it to the PR description.