Custom Select Dropdown

A custom dropdown, with full functionalities, to customise your webpage

This component was created using only HTML, SCSS and Vanilla JS.
It's a component that you can use in place of select element, since they are not very customisable. It's made out of a div wrapper and 2 children: a span and a ul. So its markup it's very simple. The style I chose is inspired to neumorphism.

🔗 Live preview: here

🔗 GitHub repo: here

How to 🔬

The custom select has all the functionalities a normal select has:

It can get focused with mouse or keyboard (TAB)
It opens/close on click
It closes if you click out of it
It's keyboard responsive, in fact once you get focus on it:
- You can use space to open/close the dropdown
- You can use Arrow Up or Down to move through the options
- You can use Escape or Enter to select and exit the select
It comes with a search function built in: just start type the option and you'll be redirected to the one matching your query.

Stack & Tools 🔨

HTML
SCSS
JavaScript
VS Code + ESLint
Git & GitHub

What I learned 📖

Learned how to hard code functionalities already built in HTML elements
Learned to style and code components
Discovered interesting properties (scrollIntoView, etc...)
Deepened debouncing pattern
Learned how to code a basic search function

What could be improved 🔍

Modularity, to let it be installed and used through npm

Author

🗿 buondevid --> GitHub

buondevid / custom-select-dropdown