Fast, Searchable Dropdown Inputs with React

input fields that are limited to one of 6,000 possible values… that’s a usability nightmare, right?

dump it in a dropdown, and you overwhelm your users. how many even know vanilla dropdowns support search? and besides, you can't style those. your designer will throw a sh*t fit. default browser crap in his beautiful design? no, no, that won't do.

looks vanilla, works vanilla. first open is slow, but search is fast if you know it exists. if you don't, you're screwed.

you could give users an input field and validate against the list of possible entries… no way that's going to be a nightmare, eh? is it stanford , stanford , stanford university , stanford university , or stanford university ? some people will enter stnraofd .

no, no, the answer is both . you need an input field and a dropdown. input filters dropdown, dropdown guides users.

step 1: react-select

jed watson's react-select library gives you input fields with dropdowns. users can use the input field or use the dropdown.

implementation looks like this:

import select from 'react-select';
import 'react-select/dist/react-select.css';

const options = [
    // ...
    { value: 'stanford university', label: 'stanford' },
    // ...
];

const field = ({ options }) => (
    <select
        name="university"
        value="one"
        options={options}
        onchange={val => console.log(val)}
    />
);

the <select> component does everything: input field, styled non-vanilla dropdown, mouse interaction, keyboard shortcuts, filtering. the only gotcha is that options have to be an array of { value, label } objects. even if both value and label are the same, i tried.

a few seconds to render the dropdown. a few seconds to filter. the browser's ui thread blocked, and you can't even see what you're typing.

5,258 entries is a lot of entries

step 2: react-virtualized-select

brian vaughn's react-virtualized-select solves the first problem – opening the dropdown. it's a higher order component that does a thing and then your thing works better.

i think it implements paging and hides it behind scroll events. only a few elements render at a time, and everyone's life is better.

here's how you use it:

import select from 'react-virtualized-select';
import 'react-select/dist/react-select.css';
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'

const options = [
    // ...
    { value: 'stanford university', label: 'stanford' },
    // ...
];

const field = ({ options }) => (
    <select
        name="university"
        value="one"
        options={options}
        onchange={val => console.log(val)}
    />
);

we changed the import select from to use react-virtualized-select and… that's all.

it opens quickly, and i was typing that whole time that nothing was happening. browser's ui thread still blocking.

step 3: react-select-fast-filter-options

brian vaughn's react-select-fast-filter-options is practically too long to mention in a tweet, and it solves the second problem: fast search.

it builds an index of your options and uses advanced computer sciencey algorithms discovered some time in the 60's, probably. we rarely have enough data to worry about actual computer science on the front end, but sometimes we do.

here's how you use it:

import select from 'react-virtualized-select';
import createfilteroptions from 'react-select-fast-filter-options';
import 'react-select/dist/react-select.css';
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'

const options = [
    // ...
    { value: 'stanford university', label: 'stanford' },
    // ...
];

const filteroptions = createfilteroptions({ options });

const field = ({ options }) => (
    <select
        name="university"
        value="one"
        options={options}
        filteroptions={filteroptions}
        onchange={val => console.log(val)}
    />
);

we added a filteroptions prop to select , which specifies a custom filter implementation, and we used createfilteroptions to instantiate that implementation. no need to worry about how it actually works because it just works™.

looks good, works good. faster even than the vanilla browser implementation

the only gotcha is that you have to pass the same options to both select and createfilteroptions . dynamically generating { value, label } objects from an array won't work.

the good news is that the memoization mobx does for @computed values is good enough, so you can do something like this:

class formdata {
    @observable universities = ['stanford', 'uva', ...];

    @computed get options() {
        return this.universities.map(name => ({ value: name, label: name }));
    }

    @computed get filteroptions() {
        const options = this.options;
        return createfilteroptions({ options });
    }
}

i don't know if it would work with redux. as long as you're careful about the reference thing, you should be fine.

but is it a good idea?

yes. use this approach for all select fields. even the small ones! there's no harm, and it's faster. winning.