gistfile1.txt

  var AddFilterForm = React.createClass({
    getDefaultProps: function () {
      return {
        tooltip: ''
      };
    },

    componentDidMount: function () {
      this.focusFilterField();
    },

    componentDidUpdate: function () {
      this.focusFilterField();
    },

    focusFilterField: function () {
      this.refs.addItem.getDOMNode().focus();
    },

    onChangeFilter: function (e) {
      Actions.filterChange(e.target.value);
    },

    render: function () {
      return (
        <form className="form-inline js-filter-form" onSubmit={this.props.onSubmit}>
          <AddFilterFormContent onChange={this.props.onChangeFilter} filter={this.props.filter}
            tooltip={this.props.tooltip} />
        </form>
      );
    }
  });

  var AddFilterFormContent = React.createClass({
    render: function () {
      return (
        <fieldset>
          <input type="text" ref="addItem" className="js-changes-filter-field" placeholder="Type a filter"
            onChange={this.props.onChangeFilter} value={this.props.filter} />
          <button type="submit" className="btn btn-primary">Filter</button>
          <div className="help-block">
            <strong ref="helpText">e.g. _design or document ID</strong>
            {' '}
            <FilterTooltip tooltip={this.props.tooltip} />
          </div>
        </fieldset>
      );
    }
  });