React-Dropdown-Input

React-dropdown-input displays a "combobox" for React. More explicitly, it shows a text input box; once the user starts to type, a dropdown menu opens with matching options. The user can choose one of those options either by clicking one, or by using the arrow keys and hitting Enter.

It is styled with bootstrap, using the React-Bootstrap package; it actually displays a ReactBootstrap.Input element with a ReactBootstrap.DropdownMenu of possible options.

Demo

http://racingtadpole.github.io/react-dropdown-input/example/

Installation

npm install react-dropdown-input --save

Sample Usage

var searchNames = ['Sydney', 'Melbourne', 'Brisbane', 
    'Adelaide', 'Perth', 'Hobart'];
//...
<DropdownInput 
    options={searchNames}
    defaultValue={this.props.initialValue}
    menuClassName='dropdown-input'
    onSelect={this.handleSelectName}
    placeholder='Search...'
/>

In more detail...

The options are simply passed as a javascript array (or immutablejs object) to the options prop.

Supply one or both of these callbacks: onSelect & onChange.

• onSelect fires when an option is clicked, or when Enter is pressed. It passes the object:

    { value: input text,
      index: option index, or -1 if user entered their own text and pressed Enter
    }
  

• onChange fires whenever the input text value changes, either due to a click or typing. It passes the object:

    { value: input text }
  

Other props you can pass:

• filter: a function that determines which options to show, given the input text (see defaultFilter in the code for the default).
• menuClassName: a class for the menu, which you need for the css styling below; eg. 'dropdown-input'.
• max: the maximum number of options to display.
• maxText: text of a disabled MenuItem to show at the end of a list, if the max is exceeded replaces '#' with the number not shown; defaults to '+# more not shown'.

You can also pass <DropdownInput> all the properties that <ReactBootstrap.Input> allows, eg. ButtonAfter.

IMPORTANT NOTE ABOUT CSS

You need to turn off Bootstrap's hover highlighting css for this element; we do it manually using the active class instead. You may also need to re-enable the hover highlighting on the active class. Eg. in sass, add this:

.dropdown-input.dropdown-menu > li > a {
  &:hover,
  &:focus {
    color: $dropdown-link-color;  // #333
    background-color: $dropdown-bg; // #fff
  }
}
.dropdown-input.dropdown-menu > .active > a {
  &:hover,
  &:focus {
    text-decoration: none;
    color: $dropdown-link-hover-color;  // #fff
    background-color: $dropdown-link-hover-bg;  // #337ab7
  }
}

If you're showing maxText, you may also want to make sure it can't be selected too:

.dropdown-input.dropdown-menu>.active.disabled>a {
  text-decoration: none;
  color: $dropdown-link-disabled-color; // #777
  background-color: $dropdown-bg; // #fff
}

Release History

• 0.1.0 Initial release
• 0.1.1 Point to js (not jsx), update README
• 0.1.2 Update example
• 0.1.3 Align package.json version number with git tag
• 0.1.4 Added maxText property
• 0.1.5 Added eslint to dev
• 0.1.6 Corrected number not shown
• 0.1.7 Don't pass options and menuClassName props through to Input
• 0.1.8 Added working tests using jest
• 0.1.9 Use self-closing tag in ReadMe
• 0.1.10 Remove extra comments, rename var as DropdownInput
• 0.1.11 Prevent form submission if open