Tab acts unexpectedly

[stavlocker]

Hi. There are problems with how tab behaves:

• Tab should have it's default behaviour just like it does with normal inputs. The caret navigation shouldn't be mixed with the tab navigation. At least there should be an option to control this. Currently you can't even tab forward as react-typeahead intentionally does for some odd reason. A fix to this would be https://github.com/fmoo/react-typeahead/pull/140 but it was never merged due to there not being documentation & tests (which isn't that big of a deal).

• Tab for some reason selects the first option available. But, for example if my options are "foo 1", "foo 2", and "foo 3", and I type "foo 2" it will select "foo 1" which for some reason shows as the first option. Also, for some reason custom options are ignored even when the option is on.

This is terrible UX and makes it really hard to use.

P.S: If this project is abandoned, please just say so in the README.md to save people a lot of time.

[stavlocker]

Here's my temporary solution, a.k.a the hackiest hack I ever hacked together:

class TypeaheadHack extends React.Component {
    componentDidMount = () => {
        ReactDOM.findDOMNode(this).addEventListener("keydown", e => {
            if(((e.key && e.key == "Tab") || e.keyCode == 9) && !e.shiftKey) {
                var current = e.target;
                var all = document.querySelectorAll('input, button, area, object, select, textarea');//no anchors!

                var currentIndex;
                for(var i = 0; i < all.length; i++){
                    if(current.isEqualNode(all[i])){
                        currentIndex = i;
                        break;
                    }
                }

                setTimeout(() => {
                    all[currentIndex + 1].focus();
                }, 50);
            }
        }, true);
    }

    render () {
        return (
            <Typeahead {...this.props}/>
        );
    }
}

What I'm doing here is hackily wrapping the Typeahead in another component which I can access it's ReactDOM.findDOMNode (which is hacky and shouldn't really be used), so I can forcefully register my keyDown event (which typeahead doesn't let me to do) and simulate a tab click (again, hacky).

Please just merge the PR that fixes this!