Custom multi-select dropdown with search function React (Part 1)

When building websites and web applications, you do not have enough space to display all your content. To maximize space, you can use dropdown menus.

A dropdown is a list of choices that can only be seen if a user interacts with it, either by clicking on it or by moving their mouse over it. The menu options then vertically descend and vanish after the user leaves the menu. The typical html select dropdown has some drawbacks. For instance, if we were to pass 50–100 items, the list will fill the entire screen and even overflow; If we remembered a name among the options and couldn't immediately perform a search for it, we would have to continue scrolling down the page. in which case the user experience would be poor. Additionally, it is impossible to add items like checkboxes to your options.

In this post, you'll learn how to build a custom scrollable dropdown with a checkbox for selection and a search functionality to quickly search for anything among the options.

We will be using some popular libraries like

Chakra-ui/react: A great UI library I would recommend anytime. It gives you the building blocks you need to build your React applications. I should probably do an article on this as well.
lodash.debounce: This essentially delays a function until a set time has passed. This will be used to prevent re-rendering in our React application on every keystroke but instead after a set time has passed. We will use it even if our data set won't be too big.

These packages will improve the project's visual appeal, but everything will be custom done. Let's start a simple React project now and install the packages mentioned above. You can do this however you want with vite or npx the choice is yours. We will go ahead and create a component that we will call InputDropdown and use it to create our input with some simple styling as you will see in the code snippet below

Creating our custom hook to display our dropdown

To display the drop-down when the user focuses on the newly created input and hide it when the input is no longer being focused, we would need to develop a custom hook in React. We can always identify when the input is focused because we can access its "onFocus" attribute, but we are unable to determine when a click outside the input has taken place which prevents us from hiding the drop-down. This hook we are about to write will help us listen for clicks outside of the input and give us a true or false state, which we can use to hide or show our drop-down. Below is the code.

Our Dropdown

The next step is to write the code for our drop-down and use the hook we previously created to display and hide it. The dropdown will have a maximum height and all other list items will be scrollable after that. Some other stylings added here were to give our options hover state on hover, box-shadow etc.

The dropdown appears, as you can see, but it is largely empty. Let's develop a checkbox component that will be shown as a selection in the dropdown menu.

To represent the values of the checkbox we just created, we are going to create a dummy array with random values. This dummy data will be created in a separate file and imported in our parent component which will be supplied as a prop into our InputDropdown component. Since you would typically wish to send data from the parent to the child in a real-world scenario. Using the dummy array we just made, import the checkbox into the InputDropdown component and map through it to produce the result below.

One last thing we will do in this lesson is add the ability to search through the options. Which is why we installed lodash.debounce at the beginning. We are going to pass an onChange handler to our input and perform our ability to search through that function. The prop itself can be used to filter when a user tries to search because it will still have all of the original items in the array. However, we can do something before that by having a state that contains our prop and use that to map through the checkbox. We will make use of the lodash that we initially installed so that there is a 500-millisecond delay between each keystroke and the search. You would want to do this in a real-world situation since it improves performance.

Here is what our full component should look like. In the next article, we are going to make our selected checkboxes show in our input and have the ability to select and unselect all.