fix(TextField): Corrects issue where label would not float after inpu…

…t was interacted with and then value was set to “” fixed #122
rmwc · Jan 24, 2018 · 9d886b6 · 9d886b6
1 parent 26967ab
commit 9d886b6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/TextField/index.js b/src/TextField/index.js
@@ -43,10 +43,10 @@ export const TextFieldLabel = simpleTag({
   classNames: props => [
     'mdc-text-field__label',
     {
-      'mdc-text-field__label--float-above': props.value
+      'mdc-text-field__label--float-above': props.value || props.focused
     }
   ],
-  consumeProps: ['value']
+  consumeProps: ['value', 'focused']
 });
 
 export const TextFieldInput = simpleTag({
@@ -158,6 +158,7 @@ type TextFieldPropsT = {
 export const TextField = withMDC({
   mdcConstructor: MDCTextField,
   mdcElementRef: true,
+  mdcApiRef: true,
   defaultProps: {
     inputRef: noop,
     disabled: undefined,
@@ -188,6 +189,7 @@ export const TextField = withMDC({
         label = '',
         className,
         inputRef,
+        mdcApiRef,
         box,
         outlined,
         fullwidth,
@@ -245,7 +247,11 @@ export const TextField = withMDC({
           {children}
           {tag}
           {!!label && (
-            <TextFieldLabel htmlFor={tagProps.id} value={tagProps.value}>
+            <TextFieldLabel
+              focused={mdcApiRef && mdcApiRef.foundation_.isFocused_}
+              htmlFor={tagProps.id}
+              value={tagProps.value}
+            >
               {label}
             </TextFieldLabel>
           )}

diff --git a/src/TextField/textfield.story.js b/src/TextField/textfield.story.js
@@ -28,6 +28,8 @@ class TextFieldStory extends React.Component {
         onChange={evt => this.onChange(evt)}
         rows={number('rows', 8)}
         cols={number('cols', 0)}
+        withLeadingIcon={text('withLeadingIcon', '')}
+        withTrailingIcon={text('withTrailingIcon', '')}
         textarea={boolean('textarea', false)}
       />
     );