In our project, some of the dropdownlist data entries should be styled differently. Concretely: we're displaying 5 'favorites' or 'recently used' items on top.

A clean solution might be to optionally allow a React style object on each data entry; next to the id and name? For instance:

var myData = [
  {id: 1, name: 'John', style: {fontWeight: 'bold'}},
  {id: 2, name: 'Miles', style: {fontWeight: 'bold'}},
  {id: 3, name: 'Charles'},
  {id: 4, name: 'Herbie'},
];

If you agree with this, I'll gladly create a pull request.

Hi.

Any idea on how i could restrict the input to this component to be only letters? So far i have tried connecting it to a redux-form-field that is hooked up to a reducer to remove all fields that are not letters.

TypeAhead selected={reduxField.value? [{name: reduxField.value}]: []} onInputChange={value=> reduxField.onChange(value)}

However, I am still able to write in digits in the textfield, although they will get deleted as soon as i type in a valid character it seems a bit odd to me. Any idea on how i could completely restrict the input to the textfield?

Hi,
I have encountered that when you preselect item from the list and then double-click the text in the field, it is not possible to rewrite the query just by typing. You first need to erase the query and then start typing.

I think this is not intended and it breaks the ux of the component.

Thanks for this project! I am trying to update to the new version and noticed an issue.

After updating to 0.7.0, my project isn't able to resolve the module. I tried to change main from lib/index.js to dist/react-bootstrap-typeahead.js in package.json and I was able to build with npm build, but I am still seeing this error in the browser console:

Uncaught Error: Cannot find module "react-bootstrap-typeahead"

I'm trying to add this module my my Babel/Webpack project and getting this error on compilation:

ERROR in ./~/react-bootstrap-typeahead/css/Typeahead.css
Module parse failed: /root/node_modules/react-bootstrap-typeahead/css/Typeahead.css Line 1: Unexpected token .
You may need an appropriate loader to handle this file type.
| .bootstrap-typeahead .dropdown-menu {
|   overflow: scroll;
| }
 @ ./~/react-bootstrap-typeahead/lib/Typeahead.react.js 33:0-31

ERROR in ./~/react-bootstrap-typeahead/css/Token.css
Module parse failed: /root/node_modules/react-bootstrap-typeahead/css/Token.css Line 2: Unexpected token .
You may need an appropriate loader to handle this file type.
| /* Token */
| .bootstrap-tokenizer .token {
|   background-color: #e7f4ff;
|   border: 0;
 @ ./~/react-bootstrap-typeahead/lib/Token.react.js 27:0-27

Seems to me the issue is about how CSS is loaded/complied, but I'm not quite sure what is the best way to handle it for this module. It would be great to have some clear instructions for use with ES6...

When cycling through the options using the arrow keys, pressing up will set the activeIndex to the last filtered option rather than the last rendered option.

Pagination should probably be moved up to Typeahead so that only options to be displayed are passed down to TypeaheadMenu.

We're using the typeahead component for a list of ~2000 cached items. Clicking the control adds all these options to the DOM, which takes some time and resources. Showing a list of more than a couple of dozens of items seems rather pointless.

Do you consider these kinds of large sets of data a valid use case for your component?

As far as a solution concerns, an option might be to set an optional maxResults property or something. When set, this number of results is only ever shown at once in the dropdown list. Of course, there should be a way to inform the user that the list is not complete. Adding a dummy item to the top or the bottom of the list is probably easiest. Clicking this could select 'nothing'. Or instead, add a 'load all' option, which does load everything that meets the filter (or in case of no filter, all data). You'd need an additional property to be able to specify this message.

Can you add a new onKeyDown handler that is invoked when the selection menu is not shown?
Useful for higher level components to invoke save action when the "Enter" key is pressed.

query 'lodash' by default resolved as 'lodash/index.js'
but this assembly extend global scope
and with module bundler this realy ploblem

please fix this import in library build babel-plugin-lodash

I have see the demo of React bootstrap tyeahead, but can not understand the pagination feature. can you please explain about it.

<Typeahead  labelKey="name" ref="typeahead"  onChange={(selected)=>this.handleChnage(selected)}  
    onInputChange={(text)=>this.handleInputChange(text)}  placeholder="what are you shopping for today?" 
 options = {TestApp} minLength = {3} 
     renderMenuItemChildren ={(props, option, idx) => { 
         console.log("Options Value",msg)
         let img =   <img  src={'/static/images/'+ option.imageUrl} width='10%' height='10%' style={style} />
         return [          
                 <div key="name">
            {img}{option.name}
            </div>      
         ];
     }}  />

Hi and thanks for your help on the previous issue!

I've updated to version ^0.7.1 and I'm seeing the following React error (using Rails 4, Webpack 1.13.0, React 15.1.0):

Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See Typeahead

It might be related to this issue with react-onclickoutside and the error seems to go away when I update the package to version ^5.3.2.

Hello,

first of all, thank you for great library. Is it possible to add prop for existing Typeahead component like emptyLabel, but for pagination sentense Display next {this.props.initialResultCount} results...?

I use your library in my cyrillic-based language application and don't have opportunity to change that.

Can we add onBlur event for better integration with redux-form? It uses this event to trigger validation.

When an item in the dropdown is selected, tab moves to the next item as expected. However, shift-tab still selects the next item, instead of moving backwards through the list as is normal shift-tab behavior.

If I have an array of strings ready to act as data, I should be able to just pass in the array without having to first transform it into an array of objects

The suggestion boxes for purposes of tabbing work as keyboard traps. I'll PR, real soon(tm)

In firefox buttons capture all events so children cannot be interactive, this is according to spec.
The official examples http://ericgio.github.io/react-bootstrap-typeahead/ are also broken in Firefox.
I propose that instead of rendering a button we render a div aria role button, etc.
PR incoming.

Can any one help, how to set value dynamically to Typeahead, as there is no any props to set the value as we done in text box.

In other words, How can I clear value of typeahead intput?

It looks like all of your dependencies are set as devDependencies, however you use several of them in your lib code. Shouldn't those be included as actual dependencies? I've identified these, but there might be more:

"dependencies": {
  "lodash": "^3.10.1",
  "react": "^0.14.2",
  "react-dom": "^0.14.2",
  "react-input-autosize": "^0.6.2",
  "react-onclickoutside": "^4.1.1",
  "classnames": "^2.2.0"
},

Is it possible , that after declare paginationText="View All Result", can we bind onClick event when we click on "View All Result" ?

With ES6 you gotta do this:

constructor(props){
        super(props);
        this.state = {
            searchValue: ''
        };
        randomClass.context = this;
}

then

handleTextFieldChange(key, event){ randomClass.context.setState({[key]: event.target.value}); }

and finally in render()

<Typeahead onInputChange={this.handleTextFieldChange.bind(this,'searchValue')} labelKey="name" options={myData}/>

But its still giving me the error...
The solution above if applied to another input works just fine.
Why is event.target undefined when I call handleTextFieldChange in the component?

Hey there,

I was wondering if it would be possible to have the "New Selection" always appear, or at least have a prop to toggle the behavior. At the moment, if the value in the Typeahead matches part of one of the options, the new selection bit is left off.

Example: The word "Carpet" is a possible choice for the Typeahead, but the user would like to enter the word "Car" as a new selection, but is unable to since "Carpet" is the only option.

Currently this package depends on external configurations (for example the appearance of style-loader when using webpack) to include the stylesheets.
I think the CSS shouldn't be included in this package, but instead should be mentioned in the docs, as a suggestion. Therefore it wouldn't be neccessary to override the included styles.

What is your opinion about this?

Hi, i tried a simple example:

import React from 'react';
import {render} from 'react-dom';
import Typeahead from 'react-bootstrap-typeahead';

var myData = [
      {id: 1, name: 'John'},
      {id: 2, name: 'Miles'},
      {id: 3, name: 'Charles'},
      {id: 4, name: 'Herbie'},
    ];

render(
  (<Typeahead
      multiple
      labelKey="name"
      //onChange={this._handleChange}
      options={myData} />
    ), document.getElementById('app'));

and im getting the error

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

a quick google search lead me to this stack oveflow question wich where the top accepted answer suggests:

Make sure NOT to list react under dependencies in your package.json. This is why we have peerDependencies ;-)

Did i not manage my setup correctly, or is the suggested Stack overflow fix at play?

Hi, after clicking on input box and hit enter key nothing happen.
`

please have a look, in version 0.8.2 its working but upgraed version is not working

I get this message when focus enters the Typeahead component:

Warning: React.__spread is deprecated and should not be used.
Use Object.assign directly or another helper function with similar semantics.
You may be seeing this warning due to your compiler.
See https://fb.me/react-spread-deprecation for more details.

I am using:

• node 5.10.1
• react 15.0.1

I couldn't find a good way to do this in the current code on master.

So as a hack (workaround) I modified the code like:

diff --git a/Typeahead.react.js b/Typeahead.react.js
index 27ea850..abafd76 100644
--- a/Typeahead.react.js
+++ b/Typeahead.react.js
@@ -300,6 +300,13 @@ const Typeahead = React.createClass({
       text = selectedOption[labelKey];
     }

+    onChange && onChange(selected);
+    onInputChange && onInputChange(text);
+
+    //clear the text after onChange has been consumed.
+    text = ''
+    selected = [];
+
     this.setState({
       activeIndex: 0,
       selected,
@@ -307,8 +314,6 @@ const Typeahead = React.createClass({
       text,
     });

-    onChange && onChange(selected);
-    onInputChange && onInputChange(text);

I know its not perfect but wanted to see what your thought are on a feature like this.

Very minor issue; doesn't affect functionality, just makes the input text slightly darker.

In our development workflow, we use gulp + browserify + babelify. This fails hard (without stacktrace even) on the lines which require css files, e.g. in lib/Token.react.js:

require('../css/Token.css');

Commenting all these lines makes browserify/babelify pass. Is it possible to package the library in a way that it works out-of-the-box with browserify?

<Typeahead newSelectionPrefix="New: "> doesn't change the displayed prefix because it doesn't pass it to TypeaheadMenu.

Hey great job on the component.
Wouldn't it make more sense adding react and react-dom as peerDedependencies in order to prevent it from throwing ref errors

Hi!

I'm trying to make use of your plugin, but I'm a bit stuck because I'm using browserify with gulp, and I guess I need some transform, because requiring css files blows up otherwise. Any ideas? Thanks a lot!

Don't move cursor to the end when:

• clicking in the middle of the text
• double-clicking to select text
• deleting chars from the middle of the text

The latest React release (15.2.0, from July 1st) produces a warning that not all props should be passed to the element.

[Error] Warning: Unknown props `filteredOptions`, `labelKey`, `onAdd`, `onRemove`, `text` on <input> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in input (created by TypeaheadInput)
    in div (created by TypeaheadInput)
    in TypeaheadInput (created by Typeahead)
    in div (created by Typeahead)
    in Typeahead (created by TypeaheadClickOutside)
    in TypeaheadClickOutside (created by SearchBarContainer)

This seems to be an issue with TypeaheadInput.react.js#L44

Single-selection already works well; need better support for tokenizer.

I integrate typeahead with react, but I am unable to click on list option and it is on enter only working.

I'm new to React. I'm using react-redux.
I have to make async call to server with the input text, so i'd need the value of the input, but i can't find a way to get it. How can i?
Thank you.

"TypeaheadInput is changing a uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components"

Hi ericgio,
Still i am facing issue.
I have used paginationText="view All" in typeahead tag, but still it display "Display Additional Result".
can we implement click functionality after setting the text in painationText, so that i can navigate to other page?

Don't make hint text case-sensitive

Pressing up, down and tab don't work as expected. Doing so jumps back and forth between focusing the first or last menu item and the input.

For my use case, I get all options from the server on the fly. When the textbox is focused and there is no user input yet, the options list is empty and it displays "no matches found". For my use case, that is very confusing to the user. In the case where there is no user input, how can I have it display nothing? I tried setting emptyLabel = null but it still renders an empty box of options. How can I make it render absolutely nothing for the options?

I am not able to hit enter key from textbox

<Typeahead labelKey="name" ref="typeahead" onChange={(selected)=>this.handleChnage(selected)}
onInputChange={(text)=>this.handleInputChange(text)} placeholder="what are you shopping for today?"
options = {TestApp} maxHeight={200} minLength={3}
renderMenuItemChildren ={(props, option, idx) => {
return [

please suggest, how to acheive this

Questions:

• How to handle long lines of text?
• Provide options for alignment (left, right, justified?)

#8

More individual examples w/code

First, thanks for a great component. I love it and it works great in all modern web browsers. However, I cannot seem to get it to work in the older browsers like IE 11. Are you planning on adding support for IE 11/IE 10.

In versions > 0.6.0, Esc no longer closes the container. Tab used to as well, and I can understand why you would want to keep it open on tab (to select items), however Esc should still close the container.

The two lines responsible for closing the component were commented out in this commit:
23260ca

See: