ezequiel / react-typeahead-component Goto Github PK

Howdy -

I've been hunting for a nice typeahead for react for a while. I use SystemJS to load modules, generally by downloading their minified source from the /dist folder & checking that into our source control. This works fine for all the 3rd party stuff we use that's packaged up with webpack. I cannot get this module to load via SystemJS. Browserify is doing some funkiness with _process and require('react') - both of which throw errors for me. Would you be interested in me forking this & changing the build process to generate a distribution bundle with webpack instead of browserify? That library seems to generate distribution bundles that are more easily consumed with client-side module loading.

It would be nice to add tabIndex property for text input.

Hi!

I'm having some trouble using react-typeahead-component on mobile devices namely iOS (iPhone 4S, iPad 2) devices with Chrome.

When I try to select the input, nothing happens. It seems that the input that gives the typeahead look is getting the focus event instead of the actual input where the user needs to write.

I was able to reproduce this using your Youtube example: http://ezequiel.github.io/react-typeahead-component/youtube/

Any ideas on how to fix this?

Cheers!

Hi,

Any plans on updating this to use latest version of react (v15)?

I am getting the following error when I try to install this.

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "react-typeahead-component"
npm ERR! node v4.2.2
npm ERR! npm  v2.14.7
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@>=0.12.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.1
npm ERR! peerinvalid Peer [email protected] wants react@>=0.13.1 <1.0.0
npm ERR! peerinvalid Peer [email protected] wants react@>= 0.13.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0-0

https://github.com/ezequiel/react-typeahead-component/blob/master/src/components/typeahead.jsx#L505

Is causing a warning on [email protected]

I'm getting this warnings in console due to a getDOMNode used in typeahead:

Typeahead.getDOMNode(...) is deprecated. Please use ReactDOM.findDOMNode(instance) instead.
if (target !== window && !this.getDOMNode().contains(target)) {
_this.hideHint();
_this.hideDropdown();
}

Any plan to upgrade to new react?

Hi,

Thanks for making this component! I'm not sure if you've tested this with react 0.14 yet, or if you're planning to support it in the future? Right now it will not install due to peerDependencies using npm 2.x w/ react 0.14-betax

It will install with npm 3, but I haven't extensively tested it yet.

Hi, I can't get the input value via the onKeyPress event. How do I get the input value? Here's my current code:

import React from 'react';
import Typeahead from 'react-typeahead-component';
import OptionTemplate from './OptionTemplate.jsx';

export default React.createClass({
  onKeyPress(inputChar){
    var key = inputChar.key;
    var inputVal = $(this.props.id).html();
  },

  render() {
    return (
      <div>
        <Typeahead
          optionTemplate={OptionTemplate}
          autoFocus={true}
          placeholder='Search Youtube'
          onKeyPress={this.onKeyPress}
          onComplete={this.handleComplete} />
      </div>
    );
  }
});

Is this component have react ES6 support ?

I wrapped <Typeahead> in a container div, and set tabIndex=1 on this container, then onOptionClick can't fire any more. I think maybe it's because of capture focus event in this line?

addEvent('focus', handleWindowClose, true);

The previousInputValue value is not updating when using multiple tokens. Right now the value is only updated if previousInputValue equals null. Is it possible to update this value always before Arrowing Up and Down?

Hello,

I'm trying to duplicate the Youtube autocomplete example; however, the react-typeahead-component is not displaying the drop-down section. Here is my code:

import React from 'react';
import Typeahead from 'react-typeahead-component';
import OptionTemplate from '../templates/OptionTemplate.jsx';
import $ from 'jquery';

let googleUrl =  '//suggestqueries.google.com/complete/search?client=youtube&ds=yt&q=';

export default React.createClass({
  getInitialState: function() {
    return {
      inputValue: ''
    };
  },

  getDefaultProps() {
    return { 
    };
  },

  onKeyPress(i){
    var enteredChars = this.state.inputValue;
    var self = this;
    $.ajax({
      url: googleUrl,
      dataType: 'jsonp',
      data: {
        q: enteredChars
      },
      success: function( results ){
        console.log('the results are: ', results);
        self.handleHint(results);
      }
    });
  },

  handleHint(){
    return 'blahblahblha';
  },

  handleComplete(){
    alert('complete!');
  },

  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  },

  render() {
    return (
      <div>
        <Typeahead
          inputValue={this.state.inputValue}
          inputId={this.props.id}
          autoFocus={true}
          placeholder='Search Youtube'
          onKeyUp={this.onKeyPress}
          optionTemplate={OptionTemplate}
          onChange={this.handleChange.bind(this)}
          handleHint={this.handleHint}
          onComplete={this.handleComplete} />
      </div>
    );
  }
});

What am I doing wrong? Thanks!

There's onOptionClick for when an option is clicked but how do you detect option selection when the user presses Enter after moving up and down with arrow keys?

I'm having to directly add a listener to the input element to listen for blur events so I can do a proper check for if a new value has actually been selected, either by hitting "Enter" or by clicking. It would be nice if there was an event for when the dropdown is closed, this way I know that the user is done.

Hi,

I would like to have a more generic option change handler as I have a number of typeahead controls on the page each with a different input id. Would it be possible to enhance the handler calls to include the input id alongside the options parameter.

Thx

I have been running into an issue where onOptionClick() will not fire in Internet Explorer. I think it is an issue with the handleWindowClose event getting fired when it shouldn't be.

I think the culprit is in typehead.js:103

addEvent('focus', handleWindowClose, true);

From there, moving down to the handleWindowClose() function, It looks like the event target is the entire window, not the option I just clicked.

Setting capture to false on line 103 seems to fix the issue. I believe the root cause is that the bubbling causes the focus on the window first instead of the option actually clicked. Therefor, the dropdown just closes without triggering an onOptionClick.

Any thoughts on this?

Hi!

Thank you so much for typeahead component! It works really well!
I'm having a small issue with server-side rendering. I don't know if you ever tested this.

From what I've gathered, when document exists you inject some css. This generates an issue with server-side rendering, because the rendered DOM on the server is different from the one rendered on the browser, giving the nasty error above.

Can you consider embedding the CSS into the JSX or providing it as a separated file to be included with less or into the head ?

Cheers!

@ezequiel There is a checksum error when rendering isomorphically. You are setting disabled: true on your input which React re-writes to disabled for an input.

It would be cool if you could do multiple queries for a given input, and have queries saved as tags in the input field.

Something similar to this: https://github.com/olahol/react-tagsinput

Have you thought about adding something like this?

The fact that classNames aren't configurable makes it difficult to use this component with something like bootstrap. It would be really nice if your exposed a dictionary of classnames that could be overridden by the user eg:

customClasses={{{
input: "form-control"
}}

On Chrome, browser autocomplete shows up and overlaps with the typeahead dropdown.
Chrome on desktop now supports autocomplete=off

Reference thread:
https://code.google.com/p/chromium/issues/detail?id=468153#c123

First off, thanks for this component. It's pretty awesome. Though I'm having some problems with focus management. The problem is that, following a selection from the drop-down menu, or pressing Enter from the input, the focus disappears form the input element rather than return to it. And though it's possible to use e.currentTarget.focus() from onKeyDown, for example, it's not possible to do so from onOptionClick. Rather than handling this behavior in callbacks it'd be nice to see it as a default behavior. Thoughts?

First of all - this component is royal awesomeness. Configurability is way beyond anything else.

I've got a slight issue, though: I'm using it for a quick entry mechanism - think freehand text turned into structured data upon selection. When each word is being typed, we're going to give you suggestions as to what it might be (based on what property of the structured data we think you are specifying atm). So, I'd like to be able to select a suggestion and continue typing without dropdown closing down on me. Currently, there's no way to prevent it from closing.

There are 2 solutions that crop into my mind:

1. event.preventDefault() - pros: the component itself will continue handling open/close state, which makes development a breeze. cons: jQuery-like not react-like.
2. Make open/close a controlled property - pros: achieve whatever you'd like. cons: much more hassle to get up and running.

Or maybe there's already a configuration and I'm simply missing it?