Hey, first of all thanks for the library. I'm already using react-autosuggest and this fits perfectly next to it! 🤗

However, when using focusFirstSuggestion (basically focuses the first selection), and hitting [enter] the value is selected, however the value isn't cleared. Here is an example: http://d.pr/v/LcOR

Hello.
Now <Autosuggest/> does not expand if input is focued and value is empty string.

Could you provide a new prop openOnFocus on Chips component and open <AutoSuggest> even if input value is empty?

p.s. Thanks a lot for react-chips. Simple to use.

I am using react-chip for a project but discovers it logs every input to the console. How can I prevent this?

sorry for my bad English

Hi , I am Unable to add background color to individual chips.Can you provide any attribute in your component to add unique Key or unique id.
We are passing only Array of values instead of that can you provide option of sending in Array of objects.So that we can easily modify the chips.
Please help in applying background color to individual Chips.

in addChips(..)
you call this.props.onChange(this.state.chips) after this.setState(..)
but the new state is not send to onChange because of asynchronous.
So you have to call this.props.onChange with chips variable because it is the new state.

first of all, Thanks for the npm ,I have installed react chips npm and using as part of my component,i want to write test case for react chips,
i have written it but is is not hitting onchange function and sugesstions are empty may be.and how can i mock suggestions?

can you help me in writing test case ,
Thanks in advance.

Good day, and congrats for this great package.

The suggestion selector always opens down, if the chips selector is near to bottom of the page or the footer, this is a inconvenient to choose a suggestion far bellow.

How can I modify this behavior?

How can I set the background color of each chip individually? Ideally this could be an easy option, or at least something added to the docs. Thanks for a useful react component!

Maybe I didn't see any solution in the docs but, when I have multiple chips instances in a same class component for example its very difficult to identify which one was updated to pass on setState so probably we can have access to the event object to get name of the current chip

Using this package produces the following console message:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Great package by the way!

For example, the <div> that takes the input keeps dynamically widening when a chip is added.

This can be stopped by adding a width property.

Normally, I can just override the css elements in my own custom.css, but because the styling appears to be inline, I cannot do so.

Would we be able to add names to divs? This would at the very least make customization a bit easier.

I've highlighted in the screenshot which <div> I wish to customize.

Currently, the workaround is to make another empty div that wraps around the chip, and use that to apply width properties.

This is fine, but applying names to div would be easier to customize (IMO)

Is there a way in which I can handle the blur event for the Chips component to create a last chip when the user blurs the element?, for example

[food x] [drinks x] soda -> blur event -> [food x] [drinks x] [soda x]

It's a bit counter-intuitive that the last item is lost if I don't press enter or tab before submitting as part of a form, am I missing something here?

npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.3.0 but none is installed. You must install peer dependencies yourself.

But we're well beyond react 15, is it time for an update?

It took looking at the code to realize creating a non-suggested chip requires hitting the tab key. Would it be possible to have this be customizable from the html tag level?

Hi,

When not using multiSection, filterSuggestions should return a boolean indicating whether to show the suggestion.

My question is what should filterSuggestions return when using multiSection?

Thank you.

I've used createChipKeys prop to make both Enter and comma key to create chips.

Both are working on windows and Linux OS but not in Android device. Enter key is creating chips on Android but not comma key.
I've add these ASCII keys. Please suggest, if i'm wrong.

<Chips
placeholder={t("DOMAIN_NAME")}
variant="outlined"
onChange={handleChange}
value={selectedUser}
createChipKeys={[13, 188]}
/>

I use this versions.

 "material-ui": "^0.20.0"
"material-ui-chip-input": "^0.18.8"

and I try to use chips following README sample code.

I got Title's error.

I resoleved this using MuiThemeProvider.

import { MuiThemeProvider } from 'material-ui/styles';
<MuiThemeProvider>
    <ChipInput
        defaultValue={['foo', 'bar']}
        onChange={(chips) => console.log(chips)}
    />
</MuiThemeProvider>

It may need to change sample code.
thanks,

hi there,
i want the synthetic react event created on the selection of chip.
but i am unable to find any...
is there any way to get there???
like i am calling a function on chip selection.
and want there the synthetic and general way of event.target to get the dynamic name i assign to the component.
like
<Chips
value={this.state.user.medicines}
onChange={this.changemedicines}
name={"medicine"+item}
suggestions={this.state.medicines}
placeholder="click to add medicines"
/>
but it doesn't returns any event but only a chip...
what i can do???

I don't get how we are supposed to style it, I'm trying to use it with material-ui v1 and make it look like material design, would you be able to provide a small example of how to style it?

Thank you!

If you paste a sentence like 'this, is, a, test' it will create only the word test as a chip.

 addChip = (value) => {
    if (this.props.uniqueChips && this.props.value.indexOf(value) !== -1) {
      this.setState({value: ""});
      return;
    }
    let chips = [...this.props.value, value]
    this.props.onChange(chips);
    this.setState({ value: "" })
  }

I belive that is caused by addChip being called on a loop and this.props.onChange(chips) is been executed asyncronous by the component using this component, so the props value does not change in time for the next iteration.

Hi, I'm not able to change the placeholder style. I want to change its color, but it doesn't let me. Does anyone know how to do it?

Also the property "focus" doesn't let me to change the border color of the input.

I think press enter is more intuition for most people.

When I've used this awesome project, I've felt the lack of providing a chipTheme 'prop' to affect how a singe chip will be styled. The default chip style was very convenient to me up to the point of the background color which I really wanted to change, without the need to create a 'CustomChip' through a render function.

This addition will contribute to a faster prototyping experience as to my own experience. #25

All that needs to be done is updating the radium dependency to be at least 0.19.0, as 0.18 has react.proptypes and breaks in react 16

Interested to know if this functionality exists or if there're plans for it's implementation.

To limit the number of chips before the input is disabled.

When I use the onChange function as shown in the documentation,
onChange = chips => {
this.setState({ chips });
}
the value of chips is undefined.

This is my code. and handleAuthorsChange is not getting invoked

This is output

Getting peer dependency issues when using react 17/18.

Would be great to update, similar to what was done with React 16: #27

With radium 0.18.2 the following error appears:
Uncaught TypeError: Super expression must either be null or a function, not undefined
Works, when radium is rolled back to 0.18.1 :)

Even when putting fromsuggestiononly input to false i cannot enter chip without selecting from suggestion box.

With the use of sagas or observables you don't need any async code in your containers and components.

I recommend you consider adding a loading-prop and change fetchSuggestions to be just a handler without async support to better support these new patterns.

I am using react-chips in my popup, it is working good in Chrome, but not supporting in IE 11 in production mode. Please let me know whether react-chips supports IE 11.

Thanks,

Hi,
Im trying to user Chips and send it a createChipKeys with array of separators,
but although I didn't include comma as a separator, when am pressing it, it enter to "onChange".

is there any way to remove it from the chip keys?

thanks.