Redundant chips in popover

[Sharlaan]

I just discovered this new component which fits perfectly my current needs, very nice job !

Can i mention your project in official MaterialUI issues ? (i have a pending PR about autocomplete with Chips but didnot know about this project)

I also have 2 suggestions about the chips in popover:

1. Whenfirst focusin the input (no value typed), the autocomplete popover should show with all available suggestions.
2. When selecting a suggestion chip from popover, this suggestion should disappear from suggestions list. And vice versa when deselecting a chip from the input, this chip should reappear in suggestions list.
   This behavior would make usage more friendly imho.

What's your thoughts ?

[leMaik]

I'm happy to see that this component is useful for some people. :) Of course, you can mention this project. I don't know if they'd merge this component into their core library, but if they want, I'd be all for it.

Regarding your suggestions:

• Show popover on focus with no value typed: I'll add an option to display the popover even if no text is entered (if that is possible using <AutoComplete />
• Remove selected chips from suggestion list: That would be a good enhancement for usability, I'll add that in the next version 👍

[leMaik]

Your first suggestion was already possible using the openOnFocus prop. I added it to the props table in the readme so that it is easier to find.

If openOnFocus is set to true, the menu will open on focus, if there are auto-complete suggestions. That means that you need a filter that has results even without input, which the default filter does not do (it returns no results if there is no input).

I added a story that does what you want, using this code:

<ChipInput
  fullWidth
  openOnFocus
  dataSource={['alpha', 'beta']}
  hintText="Try typing a..."
  filter={(search, key) => search === '' || key.indexOf(search) >= 0}
/>

[Sharlaan]

Just tried, very nice !

1. Would it be possible to make the filter function as default value, so just have to include "openOnFocus" to get the functionality ?
2. Also would it be possible, when "openOnFocus" is true, to keep the popover opened (it would close only on clickaway from the component's main container). Explanation: an input using chipS is not supposed, at least in general usages, to use only one Chip. So it would be more userfriendly to have the popover opened to multiselect several options at once.

[leMaik]

1. Thought about that, but I wasn't sure if that should be the default filter. The way it is now, it behaves liek AutoComplete, which makes it consistent.
2. I could re-open the menu, but it is hard-coded to always close when pressing the enter key in the dropdown menu. 😕 I really don't want to write my own AutoComplete.

[Sharlaan]

1. yes agreed, but the original AutoComplete is designed for a single value selection. Is a ChipInput also supposed to be same design ? Probably not ...
2. Indeed i also noticed this hard coded way for the close(), but maybe a look at my PR#L247 would help you find an easy solution ? (actually i didnot have to change "that" much)

[leMaik]

1. Good point, I'll change the default value.
2. I'll look into that in the next days. I think I just need to override the event handler somehow (without copy/pasting AutoComplete)

[leMaik]

@Sharlaan Didn't get number 2 to work.
If you want to do this, a pull request would be highly appreciated. :)

PS: Let's continue this discussion over at #11.