Add newChipKeys to allow using KeyboardEvent.key instead of KeyboardE…

…vent.keyCode. Closes #271

README.md

@@ -57,7 +57,8 @@ import ChipInput from 'material-ui-chip-input'
 |inputRef|`func`||Use this property to pass a ref callback to the native input component.|
 |inputValue|`string`||The input value (enables controlled mode for the text input if set).|
 |label|`node`||The content of the floating label.|
-|newChipKeyCodes|`arrayOf`|`[13]`|The key codes used to determine when to create a new chip.|
+|newChipKeyCodes|`arrayOf`|`[13]`|The key codes (`KeyboardEvent.keyCode`) used to determine when to create a new chip.|
+|newChipKeys|`arrayOf`|`['Enter']`|The keys (`KeyboardEvent.key`) used to determine when to create a new chip.|
 |onAdd|`func`||Callback function that is called when a new chip was added (in controlled mode).|
 |onBeforeAdd|`func`||Callback function that is called with the chip to be added and should return true to add the chip or false to prevent the chip from being added without clearing the text input.|
 |onChange|`func`||Callback function that is called when the chips change (in uncontrolled mode).|

src/ChipInput.js

@@ -309,7 +309,7 @@ class ChipInput extends React.Component {
       }
     }
     const chips = this.props.value || this.state.chips
-    if (this.props.newChipKeyCodes.indexOf(event.keyCode) >= 0) {
+    if (this.props.newChipKeyCodes.indexOf(event.keyCode) >= 0 || this.props.newChipKeys.indexOf(event.key) >= 0) {
       const result = this.handleAddChip(event.target.value)
       if (result !== false) {
         event.preventDefault()
@@ -359,7 +359,7 @@ class ChipInput extends React.Component {
   }
 
   handleKeyUp = (event) => {
-    if (!this._preventChipCreation && this.props.newChipKeyCodes.indexOf(event.keyCode) >= 0 && this._keyPressed) {
+    if (!this._preventChipCreation && (this.props.newChipKeyCodes.indexOf(event.keyCode) >= 0 || this.props.newChipKeys.indexOf(event.key) >= 0) && this._keyPressed) {
       this.clearInput()
     } else {
       this.updateInput(event.target.value)
@@ -504,6 +504,7 @@ class ChipInput extends React.Component {
       inputValue,
       label,
       newChipKeyCodes,
+      newChipKeys,
       onBeforeAdd,
       onAdd,
       onBlur,
@@ -684,8 +685,10 @@ ChipInput.propTypes = {
   inputValue: PropTypes.string,
   /* The content of the floating label. */
   label: PropTypes.node,
-  /** The key codes used to determine when to create a new chip. */
+  /** The key codes (`KeyboardEvent.keyCode`) used to determine when to create a new chip. */
   newChipKeyCodes: PropTypes.arrayOf(PropTypes.number),
+  /** The keys (`KeyboardEvent.key`) used to determine when to create a new chip. */
+  newChipKeys: PropTypes.arrayOf(PropTypes.string),
   /** Callback function that is called when a new chip was added (in controlled mode). */
   onAdd: PropTypes.func,
   /** Callback function that is called with the chip to be added and should return true to add the chip or false to prevent the chip from being added without clearing the text input. */
@@ -711,6 +714,7 @@ ChipInput.defaultProps = {
   delayBeforeAdd: false,
   disableUnderline: false,
   newChipKeyCodes: [13],
+  newChipKeys: ['Enter'],
   variant: 'standard'
 }
 

src/ChipInput.spec.js

@@ -49,6 +49,32 @@ describe('uncontrolled mode', () => {
     expect(handleChange).toBeCalledWith(['foo', 'bar'])
   })
 
+  it('can use key instead of keyCode', () => {
+    const handleChange = jest.fn()
+    const tree = mount(
+      <ChipInput onChange={handleChange} />
+    )
+
+    tree.find('input').getDOMNode().value = 'foo'
+    tree.find('input').simulate('keyDown', { key: 'Enter' })
+    expect(handleChange).toBeCalledWith(['foo'])
+  })
+
+  it('can use custom keys to add chips', () => {
+    const handleChange = jest.fn()
+    const tree = mount(
+      <ChipInput onChange={handleChange} newChipKeys={['Enter', 'Tab']} />
+    )
+
+    tree.find('input').getDOMNode().value = 'foo'
+    tree.find('input').simulate('keyDown', { key: 'Tab' })
+    expect(handleChange).toBeCalledWith(['foo'])
+
+    tree.find('input').getDOMNode().value = 'bar'
+    tree.find('input').simulate('keyDown', { key: 'Enter' })
+    expect(handleChange).toBeCalledWith(['foo', 'bar'])
+  })
+
   it('calls onChange when deleting chips with backspace key', () => {
     const handleChange = jest.fn()
     const tree = mount(