Allow Duplicates (#108)

* Added option to allow duplicate chips. Changed deletion to be based on index rather than value to support duplicate chip deletion

* Added duplicate chips to the story to show it off

* Fixed readme and stories with @leMaik 's feedback

* Created a copy of this.state.chips before modifying it on chip delete

Author: DanBeard

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-lib
+lib
+.idea

README.md

@@ -33,6 +33,7 @@ import ChipInput from 'material-ui-chip-input'
 ## Properties
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| allowDuplicates | `bool` | `false` | If true allows duplicate chips. |
 | chipRenderer | `function` | | A function of the type `({ value, text, isFocused, isDisabled, handleClick, handleRequestDelete, defaultStyle }, key) => node` that returns a chip based on the given properties. This can be used to customize chip styles. |
 | clearOnBlur | `bool` | `true` | If true, clears the input value after the component loses focus. |
 | dataSource | `array` | | Data source for auto complete. |
@@ -44,7 +45,7 @@ import ChipInput from 'material-ui-chip-input'
 | fullWidth | `bool` | `false` | If true, the chip input will fill the available width. |
 | fullWidthInput | `bool` | `false` | If true, the input field will always be below the chips and fill the available space. By default, it will try to be beside the chips. |
 | hintText | `node` | | The hint text to display. |
-| id | `string` | _a unique id_ | The id prop for the text field, should be set to some deteministic value if you use server-side rendering. |
+| id | `string` | _a unique id_ | The id prop for the text field, should be set to some deterministic value if you use server-side rendering. |
 | newChipKeyCodes | `number[]` | `[13]` (enter key) | The key codes used to determine when to create a new chip. |
 | onBlur | `function` | | Callback function that is called with `event` when the input loses focus, where `event.target.value` is the current value of the text input. |
 | onChange | `function` | | Callback function that is called when the chips change (in uncontrolled mode). |

src/ChipInput.js

@@ -306,7 +306,7 @@ class ChipInput extends React.Component {
         }
       }
 
-      if (!chips.some((c) => c[this.props.dataSourceConfig.value] === chip[this.props.dataSourceConfig.value])) {
+      if (this.props.allowDuplicates || !chips.some((c) => c[this.props.dataSourceConfig.value] === chip[this.props.dataSourceConfig.value])) {
         if (this.props.value) {
           if (this.props.onRequestAdd) {
             this.props.onRequestAdd(chip)
@@ -320,7 +320,7 @@ class ChipInput extends React.Component {
       }
     } else {
       if (chip.trim().length > 0) {
-        if (chips.indexOf(chip) === -1) {
+        if (this.props.allowDuplicates || chips.indexOf(chip) === -1) {
           if (this.props.value) {
             if (this.props.onRequestAdd) {
               this.props.onRequestAdd(chip)
@@ -343,8 +343,9 @@ class ChipInput extends React.Component {
       }
     } else {
       if (this.props.dataSourceConfig) {
-        const chips = this.state.chips.filter((c) => c[this.props.dataSourceConfig.value] !== chip)
-        if (chips.length !== this.state.chips.length) {
+        const chips = this.state.chips.slice();
+        let changed = chips.splice(i,1) // remove the chip at index i
+        if (changed) {
           this.setState({
             chips,
             focusedChip: this.state.focusedChip && this.state.focusedChip[this.props.dataSourceConfig.value] === chip ? null : this.state.focusedChip
@@ -354,8 +355,9 @@ class ChipInput extends React.Component {
           }
         }
       } else {
-        const chips = this.state.chips.filter((c) => c !== chip)
-        if (chips.length !== this.state.chips.length) {
+        const chips = this.state.chips.slice();
+        let changed = chips.splice(i,1) // remove the chip at index i
+        if (changed) {
           this.setState({
             chips,
             focusedChip: this.state.focusedChip === chip ? null : this.state.focusedChip
@@ -421,7 +423,8 @@ class ChipInput extends React.Component {
       onRequestDelete, // eslint-disable-line no-unused-vars
       chipRenderer = defaultChipRenderer,
       newChipKeyCodes, // eslint-disable-line no-unused-vars
-      ...other
+      allowDuplicates, // eslint-disable-line no-unused-vars
+      ...other,
     } = this.props
 
     const {prepareStyles} = this.context.muiTheme

stories/index.js

@@ -214,3 +214,9 @@ storiesOf('ChipInput', module)
       />
     </form>
   ))
+   .add('with duplicates allowed', () => themed(
+    <ChipInput
+        defaultValue={['foo','bar','foo','bar']}
+        allowDuplicates
+    />
+))