how to set inputProps

[barbalex]

Noob alarm: this issue is probably only due to my not understanding React or react-typeahead yet. If so, sorry for pestering you issues list.

I am trying to control the content of the typeahead input, for instance:

• empty it when a user clicks on an "X" symbol (see other issue: https://github.com/fmoo/react-typeahead/issues/86)
• empty it when a user navigates to a different option using the nav menu instead of the typeahead

My idea was to incorporate the selected option in state. When the typeahead input should empty, I would pass it's inputProps an apropriate option (I am not 100% sure what this option would look like though).

My options are built like this example:

{
  'value': 'A7EDF4A9-9501-46A0-82E1-51CC567EC83F',
  'label': 'Clematis recta L. (Aufrechte Waldrebe)'
}

To see if this basically works, I tested if I could pass a specific option via inputProps like this:

getInitialState () {
  return {
    itemFiltered: {
      'value': 'A7EDF4A9-9501-46A0-82E1-51CC567EC83F',
      'label': 'Clematis recta L. (Aufrechte Waldrebe)'
    }
  }
}

and inside render:

const { itemFiltered } = this.state

(some code constructing options from props and removeGlyphStyle)

return (
  <div id='filter'>
    <div style={{position: 'relative'}}>
      <Glyphicon
        glyph={'remove'}
        style={removeGlyphStyle}
        onClick={this.onClickEmptyFilterField}
      />
      <Typeahead
        inputProps={itemFiltered}
        options={options}
        filterOption={'label'}
        displayOption={'label'}
        onOptionSelected={this.onSelectObject}
      />
    </div>
  </div>
)

Unfortunately the passed in option does not appear in the typeahead input.

What am I doing wrong?

[devzsolt]

I can confirm, that passing values to inputProps doesn't work for me. Could you please fix it?

[csk157]

value prop is accepted by TypeaheadComponent itself

<Typeahead
  inputProps={{name: "q", autoComplete: "off"}}
  onOptionSelected={this.handleOptionSelected}
  ref="typeahead"
  value="abcd"
   ....

[barbalex]

that only works on first load for me

2015-08-25 22:53 GMT+02:00 Ceslovas Lopan notifications@github.com:

value prop is accepted by TypeaheadComponent itself

<Typeahead inputProps={{name: "q", autoComplete: "off"}} onOptionSelected={this.handleOptionSelected} ref="typeahead" value="abcd" ....

— Reply to this email directly or view it on GitHub https://github.com/fmoo/react-typeahead/issues/96#issuecomment-134737686 .

[aganglada]

I'm loading Typeahead with inputProps in a modal and it doesn't look like working.

<Typeahead
    options={['John', 'Paul', 'George', 'Ringo']}
    maxVisible={5}
    placeholder="Add people"
    inputProps={{ ref: 'peopleName' }}
    customClasses={{
         input: 'people-name'
     }}
/>

Do I miss something?

FYI @fmoo

[barbalex]

I found this solution to empty the typeahead in a different issue:

this.refs.typeahead.setState({
  entryValue: '',
  selection: null,
  selectionIndex: null,
  visible: []
})

[skanel]

@aganglada change ref to Ref with uppercase