diff --git a/README.md b/README.md index d94d3c9..738daa4 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ import ChipInput from 'material-ui-chip-input' | Name | Type | Default | Description | | --- | --- | --- | --- | | chipRenderer | `function` | | A function of the type `({ value, text, isFocused, isDisabled, handleClick, handleRequestDelete }, key) => node` that returns a chip based on the given properties. This can be used to customize chip styles. | -| clearOnBlur | `bool` | `true` | Clears the input value after the component looses focus if set to true. | +| clearOnBlur | `bool` | `true` | If true, clears the input value after the component loses focus. | | dataSource | `array` | | Data source for auto complete. | | dataSourceConfig | `object` | | Config for objects list dataSource, e.g. `{ text: 'text', value: 'value' }`. If not specified, the `dataSource` must be a flat array of strings. | | defaultValue | `string[]` | | The chips to display by default (for uncontrolled mode). | @@ -46,6 +46,7 @@ import ChipInput from 'material-ui-chip-input' | 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. | | 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). | | onRequestAdd | `function` | | Callback function that is called when a new chip was added (in controlled mode). | | onRequestDelete | `function` | | Callback function that is called when a new chip was removed (in controlled mode). | diff --git a/src/ChipInput.js b/src/ChipInput.js index 4d2a1bb..f0f1b9d 100644 --- a/src/ChipInput.js +++ b/src/ChipInput.js @@ -215,12 +215,14 @@ class ChipInput extends React.Component { } handleInputBlur = (event) => { - if (!this.autoComplete.state.open || this.autoComplete.requestsList.length === 0) { + if (this.props.onBlur) { + this.props.onBlur(event) + } + if (!this.autoComplete.state.open || this.autoComplete.requestsList.length === 0) { if (this.props.clearOnBlur) { this.setState({ inputValue: '' }) } this.setState({ isFocused: false }) - if (this.props.onBlur) this.props.onBlur(event) } } diff --git a/stories/ControlledChipInput.js b/stories/ControlledChipInput.js index 8114766..82bd177 100644 --- a/stories/ControlledChipInput.js +++ b/stories/ControlledChipInput.js @@ -31,9 +31,18 @@ class ControlledChipInput extends React.Component { value={this.state.chips} onRequestAdd={(chip) => this.handleRequestAdd(chip)} onRequestDelete={(deletedChip) => this.handleRequestDelete(deletedChip)} + onBlur={(event) => { + if (this.props.addOnBlur && event.target.value) { + this.handleRequestAdd(event.target.value) + } + }} fullWidth /> } } +ControlledChipInput.propTypes = { + addOnBlur: React.PropTypes.bool +} + export default ControlledChipInput diff --git a/stories/index.js b/stories/index.js index 0dc1457..00449ff 100644 --- a/stories/index.js +++ b/stories/index.js @@ -200,3 +200,8 @@ storiesOf('ChipInput', module) onTouchTap={action('onTouchTap')} /> )) + .add('add text input value on blur', () => themed( + + ))