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.
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.
<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.
true, then we execute the
showNativeSelect() method which creates a native select in the DOM.
getSelect() creates a native select and returns it back to the
This solution not only saved our time but allowed us to maximize mobile accessibility while retaining custom dropdown styles for desktop users. And now, Gifshots!
Dropdowns on non-touch devices stays custom.
And, on touch supported devices becomes native.
Join Yelp as Front-end Engineer
Interested in building reusable, responsive components? Join Yelp! If you care about good code, good design, and an outstanding user experience, we want to hear from you!View Job