ability to have multiple-select UX with single-select functionality

[atuttle]

I love the appearance and UX of the multi-select mode, but I still want to limit the user to one selection. In particular, I think showing the selection as a sort of button with an "x" to clear it is better than making them delete the text to clear their selection.

It would be great if I could set a maxSelected prop with multiple to get this behavior:

<Typeahead multiple maxSelected={1} options={[...]} />

[ericgio]

Would simply having an "X" button as part of the input to clear it address your use-case?

-----------------------------------------
|  Selected Option                    x |
-----------------------------------------

[atuttle]

I guess that would depend on how it looked and worked. As I said, I really like the UX of the multi-select mode of operation.

[ericgio]

This feels like a duplicate of #72, eg: custom rendering of single-selections. The component already supports the functionality you need (eg: single-selection) but you want more control over the appearance. Let me know if I'm missing something though.

[atuttle]

That would be fine as long as there was an easy path to reproducing the existing rendering from multiple-select mode. :)

[ericgio]

By the way, you should already be able to achieve what you want by doing something like:

<Typeahead
  onChange={selected => {
    this.setState({
      options: selected.length === 1 ? selected : this.state.options,
      selected: selected,
    });
  }}
  options={this.state.options}
  selected={this.state.selected}
/>

[ericgio]

Note that a clearButton prop was added in v1.0. You could then style the input however you want via CSS.