Combobox Feature

[knnemade99]

Initially when no item is selected , all the items were shown in the drop down list of react bootstrap typeahead,
But if I select some item from the list and again click on typeahead it shown only the item which is selected, so if i want to change the selected item i need to first delete or clear the previous selected item.

What I want is that even if a item is selected, all items should be shown in the drop down of the list of react bootstrap typeahead.

I am attaching the screenshot to make this problem more clearly visible.

** Before selection all items were shown in the drop down**

After Selection Only 1 item is shown in the drop down

Please let me know if anyone knows the solution to this problem

Thanks in Advance

[ericgio]

It sounds like what you want is combobox functionality, which is possible to achieve with the component, but not available out of the box. See this StackOverflow answer for more.

[shobhitnpm]

try using ref and onfocus event
<Typeahead
labelKey="name"
options={options}
placeholder="Choose a state..."
ref={(ref) => this._typeahead = ref}
/>

then make button

<Button
className="btn-outline-secondary"
onClick={() => this._typeahead.getInstance().focus()}>
Focus

Hope this will works.

[ericgio]

As noted above, this is possible through the use of a custom filterBy callback:

<Typeahead
  filterBy={(option, props) => {
    if (props.selected.length) {
      // Display all the options if there's a selection.
      return true;
    }
    // Otherwise filter on some criteria.
    return option[props.labelKey].toLowerCase().indexOf(props.text.toLowerCase()) !== -1;
  }}
  ...
/>