Submitted
What are you most proud of, and what would you do differently next time?
since we can't style I decided to make a custom select menu that works like the native tag, It supports:
- arrow up/down navigation
- when select menu is open preselected element gets focus if it doesn't exists then first element or gets focus
- when Escape or Tab key are pushed it closes the menu while giving focus to menu button
- also dynamic select options
export default function SelectMenu() {
const {
selectedOption,
filterExpanded,
selectOptions,
handleClick,
handleKeyDown,
} = useSelectMenu();
return (
{selectedOption === '' ? 'Filter by Region' : selectedOption}
{selectOptions.map((option) => (
{option}
))}
);
}
What challenges did you encounter, and how did you overcome them?
kept animations until last minutes, wasn't a good idea