Implement a Searchable Dropdown in React with TypeScript

Building a searchable dropdown component is a common requirement in many web applications. This challenge asks you to implement a React component that displays a list of options and filters them based on user input, providing a smooth and efficient user experience. This is useful for scenarios like selecting a country from a large list, filtering products, or choosing a user from a directory.

Problem Description

You need to create a React component called SearchableDropdown that accepts an array of options as a prop and allows the user to search through those options. The component should:

1. Display Options: Render a list of options from the provided options prop. Each option should be displayed as a selectable item.
2. Search Functionality: Include an input field where the user can type to filter the displayed options. The list should update dynamically as the user types, showing only options that match the search query. Matching should be case-insensitive.
3. Selection: When an option is selected, the component should call a callback function (passed as a prop) with the selected option's value.
4. Clear Input: Provide a mechanism (e.g., clicking outside the dropdown or a clear button) to clear the search input and reset the displayed options to the full list.
5. No Match State: If the search query doesn't match any options, display a message indicating "No results found."

Key Requirements:

• The component must be written in TypeScript.
• The component should be reusable and accept the options, onSelection, and optionally a placeholder prop.
• The component should handle an empty options array gracefully.
• The component should be visually appealing and user-friendly.

Expected Behavior:

• Initially, all options should be displayed.
• As the user types in the search input, the list of displayed options should be filtered in real-time.
• Selecting an option should trigger the onSelection callback with the selected option's value.
• Clearing the search input should reset the displayed options to the full list.
• If no options match the search query, a "No results found" message should be displayed.

Edge Cases to Consider:

• Empty options array.
• Very long lists of options (performance).
• Special characters in the search query.
• User rapidly typing in the search input.

Examples

Example 1:

Input:
options: [{ value: 'apple', label: 'Apple' }, { value: 'banana', label: 'Banana' }, { value: 'cherry', label: 'Cherry' }]
onSelection: (selectedValue) => console.log(selectedValue)
placeholder: "Search for a fruit"

Output:
A dropdown with "Apple", "Banana", and "Cherry" displayed.  Typing "ban" filters the list to "Banana". Selecting "Banana" calls the onSelection function with "banana".
Explanation: The component filters the options based on the search input and calls the provided callback when an option is selected.

Example 2:

Input:
options: []
onSelection: (selectedValue) => console.log(selectedValue)
placeholder: "Search"

Output:
An empty dropdown.
Explanation: The component handles the case where the options array is empty.

Example 3:

Input:
options: [{ value: 'apple', label: 'Apple' }, { value: 'banana', label: 'Banana' }]
onSelection: (selectedValue) => console.log(selectedValue)
placeholder: "Search"

Output:
Typing "grape" results in a "No results found" message.
Explanation: The component displays a message when no options match the search query.

Constraints

• The component should render within 500ms for lists containing up to 1000 options.
• The options array will contain objects with value (string) and label (string) properties.
• The onSelection callback function should accept a string as an argument (the selected option's value).
• The search should be case-insensitive.

Notes

• Consider using React's state management to handle the search query and the filtered list of options.
• Debouncing the search input can improve performance when the user types quickly.
• You can use any styling library or CSS framework you prefer. Focus on functionality first.
• Think about accessibility when designing the component (e.g., keyboard navigation).