bmind12 / combobox

Challenge

This project aims to showcase expertise in TypeScript, React, and the ability to integrate with libraries based on their documentation. The primary objective is to create a ComboBox component according to the given specifications.

Technologies Required

• TypeScript: Proper typing is essential. The use of any should be avoided wherever possible.
• React Hook Form (or a similar library for form management).
• Axios for making HTTP requests.
• TanStack Query for fetching, caching, and updating data in an efficient manner.
• Additional libraries known to the developer can be used as long as the required ones are included.

Component Functionality Overview

The ComboBox component should allow users to type in a text input field and dynamically fetch a list of universities from a specified endpoint based on the user's input. It should display these universities in a dropdown panel, where the user can select an option. The component must handle empty and erroneous inputs gracefully, offering a list of all Czech universities for empty inputs and displaying error states as required. It should also be integrable with React Hook Form or a similar form management library for validation purposes, and support disabled and error states. The design and functionality should adapt to different screen sizes and user interactions, ensuring a seamless and user-friendly experience.

How to run

# Install dependencies
npm install

# Run the project
npm run dev

combobox's Issues

Add submit button and validation

The form should use the React Hook Form. Upon submitting the form, frontend validation will first occur (via the form library) to check if the user has filled in the first name (text input). If the first name is not filled in, this text input will enter an error state and a message “This field is required” will be displayed below it. If the form passes validation, meaning the user has filled in the first name, an alert window will appear (using JavaScript's alert function). In this window, it will say: Name: {username}, University: {university}. If the user does not fill in the university, then it will say: Name: {username}, University: not filled in.

Implement HOC for a common input to support React Hook Form

Add possibility to clear input with an "X" button for Combobox

Implement Floating UI support to make combobox aware of viewport

If Material UI list is replaced, make sure text is truncated inside the list.

Persist Combobox selection

When user selects an input, then modifies it and doesn't select a new input and leaves the input, revert a previous valid one.

Make Combobox a common component - form package agnostic

Create a HOC for Combobox for React Hook Form, and leave it common version independent of React Hook Form API and any other.