Engineering

Dropdown Like It's Hot

Maulik S., Front-end Engineer

Apr 13, 2016

As our number of mobile web visitors continues to increase, we want to make sure that the user experience is great on small screens. This quarter, we took some time to assess our reusable UI components and look for ways to improve their behavior across devices.

We found a lot of room for improvement in our dropdown component - it looked great on desktop, but it was hard (i.e., in some cases it’d go offscreen or touch/tap being not very smooth) to use on mobile devices.

Story

We built our dropdown component to be generic enough to handle any use case our developers might need. Some dropdowns contains simple redirects, some are hooked up to make AJAX requests or sort elements on the page. We wanted to keep our changes to the dropdown component backwards compatible with all these behaviors.

Our first thought was if we could improve it by just adding some media queries or JavaScript but that would still make cross-platform testing difficult. We also thought to replace dropdown with native select component (using the HTML <select/> tag). But, that would force us to deal with problems inherent to native select elements. We would need to write JS fallbacks and include other graceful degradations in order to style our native select elements to look like custom dropdowns.

Solution

We decided to show native selects on touch devices instead of a custom dropdown menu – a hybrid solution of our options. Our custom dropdown template and CSS files were left untouched; all the magic happens in the JavaScript component.
When someone clicks or taps on the dropdown toggle, we detect whether the screen supports touch events. If it does, we create a native select instead of showing custom dropdown menu.