Merge pull request #29 from ngotchac/master

Small fixes (floatingLabelFixed, className) and add a persistInput prop

README.md

@@ -46,6 +46,7 @@ import ChipInput from 'material-ui-chip-input'
 | onTouchTap | `function` | | Callback function that is called when text input is clicked. |
 | onUpdateInput | `function` | | Callback function that is called when the input changes (useful for auto complete). |
 | openOnFocus | `bool` | `false` | Opens the auto complete list on focus if set to true. |
+| clearOnBlur | `bool` | `true` | Clear the input value after the Component looses focus |
 | style | `object` | | Override the inline-styles of the root element. |
 | value | `string[]` | | The chips to display (enables controlled mode if set). |
 

src/ChipInput.js

@@ -210,7 +210,12 @@ class ChipInput extends React.Component {
 
   handleInputBlur = (event) => {
     if (!this.autoComplete.refs.menu) {
-      this.setState({ isFocused: false, inputValue: '' })
+      if (this.props.clearOnBlur) {
+        this.setState({ inputValue: '' })
+      }
+
+      this.setState({ isFocused: false })
+
       if (this.props.onBlur) this.props.onBlur(event)
     }
   }
@@ -309,6 +314,7 @@ class ChipInput extends React.Component {
       hintText,
       hintStyle,
       inputStyle,
+      clearOnBlur,
       onBlur, // eslint-disable-line no-unused-vars
       onChange, // eslint-disable-line no-unused-vars
       onFocus, // eslint-disable-line no-unused-vars
@@ -348,7 +354,7 @@ class ChipInput extends React.Component {
 
     const hasInput = (this.props.value || this.state.chips).length > 0 || this.state.inputValue.length > 0
     const showHintText = hintText && !hasInput
-    const shrinkFloatingLabel = floatingLabelText && (hasInput || this.state.isFocused)
+    const shrinkFloatingLabel = floatingLabelText && (hasInput || this.state.isFocused || floatingLabelFixed)
 
     const errorTextElement = this.state.errorText && (
       <div style={prepareStyles(styles.error)}>{this.state.errorText}</div>
@@ -385,6 +391,7 @@ class ChipInput extends React.Component {
 
     return (
       <div
+        className={ className }
         style={prepareStyles(Object.assign(styles.root, style, overrideRootStyles))}
         onTouchTap={() => this.focus()}
       >
@@ -403,7 +410,7 @@ class ChipInput extends React.Component {
         {hintText ?
           <TextFieldHint
             muiTheme={this.context.muiTheme}
-            show={showHintText && !(floatingLabelText && !this.state.isFocused)}
+            show={showHintText && !(floatingLabelText && !floatingLabelFixed && !this.state.isFocused)}
             style={Object.assign({ bottom: 20, pointerEvents: 'none' }, hintStyle)}
             text={hintText}
           /> :
@@ -452,11 +459,13 @@ ChipInput.propTypes = {
   dataSource: PropTypes.arrayOf(PropTypes.string),
   onUpdateInput: PropTypes.func,
   openOnFocus: PropTypes.bool,
-  chipRenderer: PropTypes.func
+  chipRenderer: PropTypes.func,
+  clearOnBlur: PropTypes.bool
 }
 
 ChipInput.defaultProps = {
-  filter: AutoComplete.caseInsensitiveFilter
+  filter: AutoComplete.caseInsensitiveFilter,
+  clearOnBlur: true
 }
 
 export default ChipInput