List should not be visible when defaultValue is provided

[yashafromrussia]

I'm not sure if this is how it was designed to work or not; however, when I provide a defaultValue in props, Typeahead starts up with an open list if the defaultValue matches one of the options. And it seems like it was done on purpose since the visible state is not set to false initially:

getInitialState: function() {
    return {
      // The set of all options... Does this need to be state?  I guess for lazy load...
      options: this.props.options,

      // The currently visible set of options
      visible: this.getOptionsForValue(this.props.defaultValue, this.props.options), // this should be false since we don't want to show the list when we first load the page with a defaultValue set

      // This should be called something else, "entryValue"
      entryValue: this.props.defaultValue,

      // A valid typeahead value
      selection: null
    };
},

Was this behaviour intended?

[fmoo]

So selection being null is not a feature, I just hadn't worked through all the use cases when I initially wrote this.

When doing a search or entering new settings, the current behavior works fine, but when you have an existing value, like say when you're updating your account settings, you can't use our typeahead well :(

The tokenizer does have a defaultSelected property, which populates selected, but typeahead does not have a defaultSelected property, which it totally should.

[kacurez]

I bumped into the same problem, having list displayed when defaultValue is provided and matches the options, is there any progress or a suggestion/workaround?

[idolize]

+1 on this.

I got a workaround going with the following:

React.createClass({
  getInitialState() {
    return { activated: false };
  },
  _activate() {
    if (!this.state.activated) {
      this.setState({ activated: true });
    }
  },
  render () {
    // TODO remove when fixed: https://github.com/fmoo/react-typeahead/issues/21
    const initialValueWorkaround = {
      filterOption: this.state.activated ? (() => false) : undefined,
      onFocus: this._activate
    };
    return (
      <Typeahead
        options={this.props.options}
        defaultValue={this.props.valueLink.value}
        onOptionSelected={this.props.valueLink.onRequestChange}

        {...initialValueWorkaround}
      />
    );
  }
});

This basically just uses a filter function that rejects all values initially, then once the user clicks in the input field it switches back to the built-in filter function (by passing undefined) so the dropdown will show again on subsequent typing.

(But official support would obviously be nice to avoid having to create such an ugly wrapper component).

[zlangbert]

+1

[fmoo]

#102 may address this by allowing you to set the value of the typeahead directly (instead of the defaultValue for the text entry)

[fmoo]

Hi all, can you re-test with the value prop on the 1.1.1 release and let us know?