Input text highlight - Githubissues

It will be cool to be able to enable highlight with one prop

<Typeahead
  options={options}
  highlight
/>

So it could look like in original twitter typeahead lib https://twitter.github.io/typeahead.js/examples/#the-basics

in my app I've finished with custom displayOption implementation

displayOption = (option, index, value = this.props.value) => {
  const inputValue = (value || '').toLocaleLowerCase();
  const highlightIndexStart = option.toLocaleLowerCase().indexOf(inputValue);
  const highlightIndexEnd = highlightIndexStart + inputValue.length;
  return (
    <span>
      {option.substring(0, highlightIndexStart)}
      <b>
        {option.substring(highlightIndexStart, highlightIndexEnd)}
      </b>
      {option.substring(highlightIndexEnd, option.length)}
    </span>
  );
};

it is obvious, but then I see react warning error, due to https://github.com/fmoo/react-typeahead/blob/master/src/typeahead/option.js#L12

warning.js:44 Warning: Failed prop type: Invalid prop `children` of type `object` supplied to `TypeaheadOption`, expected `string`.
    in TypeaheadOption (created by TypeaheadSelector)
    in TypeaheadSelector (created by Typeahead)
    in div (created by Typeahead)

and another js error when try to click on dropdown option

index.js:101 Uncaught TypeError: input.trim is not a function_shouldSkipSearch @ index.js:101getOptionsForValue @ index.js:110_onOptionSelected @ index.js:189_onClick @ selector.js:101_onClick @ option.js:60ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:70executeDispatch @ EventPluginUtils.js:89executeDispatchesInOrder @ EventPluginUtils.js:112executeDispatchesAndRelease @ EventPluginHub.js:44executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:55forEachAccumulated @ forEachAccumulated.js:25processEventQueue @ EventPluginHub.js:221runEventQueueInBatch @ ReactEventEmitterMixin.js:18handleTopLevel @ ReactEventEmitterMixin.js:29handleTopLevelImpl @ ReactEventListener.js:73perform @ Transaction.js:138batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98dispatchEvent @ ReactEventListener.js:150

as I get it is due to that line https://github.com/fmoo/react-typeahead/blob/master/src/typeahead/index.js#L194, so I have to add another

inputDisplayOption(option) {
  return option;
}

and finished with something like this

<Typeahead
    options={this.props.options}
    ...
    displayOption={this.displayOption}
    inputDisplayOption={this.inputDisplayOption}
/>

fmoo / react-typeahead

Input text highlight #213