'use strict';

import React, {PropTypes} from 'react';

import cx from 'classnames';
import {head} from 'lodash';
import {BACKSPACE, RIGHT} from './keyCode';

/**
 * TypeaheadInput
 *
 * Handles a single selection from the Typeahead component.
 */
const TypeaheadInput = React.createClass({
  displayName: 'TypeaheadInput',

  propTypes: {
    disabled: PropTypes.bool,
    filteredOptions: PropTypes.array,
    labelKey: PropTypes.string,
    onBlur: PropTypes.func,
    onChange: PropTypes.func,
    selected: PropTypes.object,
    text: PropTypes.string,
  },

  render() {
    return (
      <div
        className={cx('bootstrap-typeahead-input', this.props.className)}
        onClick={this._handleInputFocus}
        onFocus={this._handleInputFocus}
        style={{outline: 'none'}}
        tabIndex={-1}>
        <input
          {...this.props}
          className={cx('bootstrap-typeahead-input-main', 'form-control', {
            'has-selection': !this.props.selected,
          })}
          onBlur={this.props.onBlur}
          onKeyDown={this._handleKeydown}
          ref="input"
          style={{
            backgroundColor: !this.props.disabled && 'transparent',
            display: 'block',
            position: 'relative',
            zIndex: 1,
          }}
          type="text"
          value={this._getInputValue()}
        />
        <input
          className="bootstrap-typeahead-input-hint form-control"
          style={{
            borderColor: 'transparent',
            bottom: 0,
            boxShadow: 'none',
            display: 'block',
            position: 'absolute',
            top: 0,
            width: '100%',
            zIndex: 0,
          }}
          tabIndex={-1}
          type="text"
          value={this._getHintText()}
        />
      </div>
    );
  },

  _getInputValue() {
    const {labelKey, selected, text} = this.props;
    return selected ? selected[labelKey] : text;
  },

  _getHintText() {
    const {filteredOptions, labelKey, text} = this.props;
    let firstOption = head(filteredOptions);

    // Only show the hint if...
    if (
      // ...the input is focused.
      this.refs.input === document.activeElement &&
      // ...the input contains text.
      text &&
      // ...the input text corresponds to the beginning of the first option.
      firstOption &&
      firstOption[labelKey].indexOf(text) === 0
    ) {
      return firstOption[labelKey];
    }
  },

  /**
   * If the containing parent div is focused or clicked, focus the input.
   */
  _handleInputFocus(e) {
    this.refs.input.focus();
  },

  _handleKeydown(e) {
    const {filteredOptions, onAdd, onRemove, selected} = this.props;

    switch (e.keyCode) {
      case RIGHT:
        // Autocomplete the selection if there's a hint and no selection yet.
        if (this._getHintText() && !selected) {
          onAdd && onAdd(head(filteredOptions));
        }
        break;
      case BACKSPACE:
        // Remove the selection if we start deleting it.
        selected && onRemove && onRemove(selected);
        break;
    }

    this.props.onKeyDown && this.props.onKeyDown(e);
  },
});

export default TypeaheadInput;

@@ -557,16 +557,88 @@
 ,%0A  %7D,%0A%0A
+  getInitialState() %7B%0A    return %7B%0A      isFocused: false,%0A    %7D;%0A  %7D,%0A%0A
   render
@@ -1084,24 +1084,23 @@
 r=%7Bthis.
-props.on
+_handle
 Blur%7D%0A  
@@ -2223,45 +2223,23 @@
 his.
-refs.input === document.activeElement
+state.isFocused
  &&%0A
@@ -2484,16 +2484,143 @@
 %5D;%0A    %7D
+%0A%0A    return '';%0A  %7D,%0A%0A  _handleBlur(e) %7B%0A    this.setState(%7BisFocused: false%7D);%0A    this.props.onBlur && this.props.onBlur(e);
 %0A  %7D,%0A%0A 
@@ -2704,16 +2704,16 @@
 .%0A   */%0A
-
   _handl
@@ -2725,24 +2725,62 @@
 tFocus(e) %7B%0A
+    this.setState(%7BisFocused: true%7D);%0A
     this.ref

Fix React warning and blur handling on TypeaheadInput