Build an Autocomplete using React.js | Type One | Frontend Coding Challenge | JavaScript Interview Question

In this coding challenge, you need to build an autocomplete that will act as a payment page where users can enter their UPI. The autocomplete form should suggest possible UPI handles based on the user input.

Functional Spec:

1. Based on the user input, you need to show the best-matched list of UPI handles.
2. There should be an inline suggestion of the best matched UPI handle.
3. The user should be able to select from the list by clicking on a list item or using the keyboard.
4. If a best-matched suggestion is visible inline and the user clicks on the right arrow, the suggestion should be auto-filled.
5. You need to handle different edge cases.
6. Feel free to add any other functionality you think would be useful for the end user.

Demo 1:

Demo 2:

Image Graphic used in the demo:

https://uploads.codesandbox.io/uploads/user/db72b415-e33f-48d9-ba47-160088dc6c79/78ab-payment-graphic.png