Enable search for Color By

[victorlin]

Description of proposed changes

This makes the Color By dropdown searchable as the list gets longer.

Enhancement proposed by @trvrb, implementation from @joverlee521

There are more non-searchable Selects, would it be appropriate to enable elsewhere? https://github.com/nextstrain/auspice/search?q=searchable%3D%7Bfalse%7D

[joverlee521]

Thanks for making the change @victorlin! Works as expected in the testing app.

I had wondered (very) briefly if we wanted to toggle the search function based on the number of options in the dropdown, but that seems like it would be overcomplicating things for no good reason.

There are more non-searchable Selects, would it be appropriate to enable elsewhere?

A majority of the other drop downs only have a handful of options that don't really warrant searching, but I also don't see any harm in enabling the search function. @jameshadfield would have more context for why they have search disabled.

[trvrb]

On desktop, I think it's a clear win always having search. However, tapping on searchable dropdowns on mobile brings up a keyboard. This is annoying if there's just a couple options.

Basically, I'd think to enable search when there's more than 5 options. This is when you need to scroll.

[victorlin]

Merged but we can continue discussion here.

---

Another option is to conditionally enable search if desktop or (mobile and >5 options). Mobile can be detected:

auspice/src/components/splash/index.js

Line 41 in efe6fff

isMobile={this.props.browserDimensions.width < controlsHiddenWidth}