Fix floating label not working without hint text.

Fixes #7.
TeamWertarbyte · Sep 15, 2016 · 55a2ee3 · 55a2ee3
1 parent 39a8b69
commit 55a2ee3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/ChipInput.js b/src/ChipInput.js
@@ -290,23 +290,23 @@ class ChipInput extends React.Component {
 
     const inputStyleMerged = Object.assign(styles.input, inputStyle);
 
-    const showHintText = hintText && (this.props.value || this.state.chips).length === 0 && this.state.inputValue.length === 0
+    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 floatingLabelTextElement = floatingLabelText && (
       <TextFieldLabel
         muiTheme={this.context.muiTheme}
         style={Object.assign(styles.floatingLabel, this.props.floatingLabelStyle)}
         shrinkStyle={Object.assign(styles.floatingLabelFocusStyle, this.props.floatingLabelFocusStyle)}
         htmlFor={inputId}
-        shrink={!showHintText || this.state.isFocused}
+        shrink={shrinkFloatingLabel}
         disabled={disabled}
       >
         {floatingLabelText}
       </TextFieldLabel>
     )
 
-    const shrinkFloatingLabel = floatingLabelText && (!showHintText || this.state.isFocused)
-
     const overrideRootStyles = {}
     if (floatingLabelText) {
       overrideRootStyles.marginTop = 14
@@ -320,7 +320,7 @@ class ChipInput extends React.Component {
 
     return (
       <div
-        style={prepareStyles(Object.assign({}, styles.root, style, overrideRootStyles))}
+        style={prepareStyles(Object.assign(styles.root, style, overrideRootStyles))}
         onTouchTap={() => this.focus()}
       >
         <div>

diff --git a/stories/index.js b/stories/index.js
@@ -30,9 +30,9 @@ storiesOf('ChipInput', module)
       fullWidth
     />
   ))
-  .add('empty with hintText', () => themed(
+  .add('with hintText', () => themed(
     <ChipInput
-      hintText="Insert your favorite tags here"
+      hintText="Hint text"
       fullWidth
     />
   ))
@@ -45,9 +45,14 @@ storiesOf('ChipInput', module)
   ))
   .add('with floating label', () => themed(
     <ChipInput
-      defaultValue={['foo', 'bar']}
-      floatingLabelText="Some chips"
-      hintText="Try typing a..."
+      floatingLabelText="Floating label"
+      fullWidth
+    />
+  ))
+  .add('with floating label and hint text', () => themed(
+    <ChipInput
+      floatingLabelText="Floating label"
+      hintText="Hint text"
       fullWidth
     />
   ))