fix(TextField): corrects floating label regression

rmwc · Nov 27, 2017 · 6e8d5fa · 6e8d5fa
1 parent 82feb1d
commit 6e8d5fa
Showing 1 changed file with 82 additions and 80 deletions.
diff --git a/src/TextField/index.js b/src/TextField/index.js
@@ -9,16 +9,16 @@ import { Icon } from '../Icon';
 import type { SimpleTagPropsT } from '../Base';
 
 type TextFieldRootPropsT = {
- /** Makes a multiline TextField. */
- textarea?: boolean,
- /** Makes the TextField fullwidth. */
- fullwidth?: boolean,
- /** Makes the TextField have a visiual box. */
- box?: boolean
+  /** Makes a multiline TextField. */
+  textarea?: boolean,
+  /** Makes the TextField fullwidth. */
+  fullwidth?: boolean,
+  /** Makes the TextField have a visiual box. */
+  box?: boolean
 } & SimpleTagPropsT;
 
 export const TextFieldRoot: React.ComponentType<
- TextFieldRootPropsT
+  TextFieldRootPropsT
 > = simpleTag({
   displayName: 'TextFieldRoot',
   classNames: props => [
@@ -65,10 +65,10 @@ export const TextFieldBottomLine = simpleTag({
 });
 
 type TextFieldHelpTextPropsT = {
- /** Make the help text always visible */
- persistent?: boolean,
- /** Make the help a validation message style */
- validationMsg?: boolean
+  /** Make the help text always visible */
+  persistent?: boolean,
+  /** Make the help a validation message style */
+  validationMsg?: boolean
 };
 
 /**
@@ -95,29 +95,29 @@ export class TextFieldHelpText extends simpleTag({
  * An Icon in a TextField
  */
 type TextFieldIconPropsT = {
- /** The icon to use */
- use: React.Node
+  /** The icon to use */
+  use: React.Node
 };
 
 export const TextFieldIcon = (props: TextFieldIconPropsT) => (
   <Icon {...props} className={(props.className, 'mdc-text-field__icon')} />
 );
 
 type TextFieldPropsT = {
- /** A ref for the native input. */
- inputRef?: React.Ref<any>,
- /** Disables the input. */
- disabled?: boolean,
- /** A label for the input. */
- label?: React.Node,
- /** Add a leading icon. */
- withLeadingIcon?: React.Node,
- /** Add a trailing icon. */
- withTrailingIcon?: React.Node,
- /** By default, props spread to the input. These props are for the component's root container. */
- rootProps?: Object
+  /** A ref for the native input. */
+  inputRef?: React.Ref<any>,
+  /** Disables the input. */
+  disabled?: boolean,
+  /** A label for the input. */
+  label?: React.Node,
+  /** Add a leading icon. */
+  withLeadingIcon?: React.Node,
+  /** Add a trailing icon. */
+  withTrailingIcon?: React.Node,
+  /** By default, props spread to the input. These props are for the component's root container. */
+  rootProps?: Object
 } & TextFieldRootPropsT &
- SimpleTagPropsT;
+  SimpleTagPropsT;
 
 export const TextField = withMDC({
   mdcConstructor: MDCTextField,
@@ -137,60 +137,62 @@ export const TextField = withMDC({
   }
 })(
   class extends React.Component<TextFieldPropsT> {
-  static displayName = 'TextField';
-  render() {
-    const {
-      label = '',
-      className,
-      inputRef,
-      box,
-      fullwidth,
-      withLeadingIcon,
-      withTrailingIcon,
-      mdcElementRef,
-      children,
-      textarea,
-      rootProps = {},
-      ...rest
-    } = this.props;
-
-    const tagProps = {
-      ...rest,
-      elementRef: inputRef,
-      id: rest.id || Date.now() + Math.random() + ''
-    };
-
-    const tag = textarea ? (
-      <TextFieldTextarea {...tagProps} />
-    ) : (
-      <TextFieldInput {...tagProps} />
-    );
-
-    return (
-      <TextFieldRoot
-        {...rootProps}
-        className={classNames(className, rootProps.className, {
-          'mdc-text-field--with-leading-icon': !!withLeadingIcon,
-          'mdc-text-field--with-trailing-icon': !!withTrailingIcon
-        })}
-        textarea={textarea}
-        box={box}
-        fullwidth={fullwidth}
-        elementRef={mdcElementRef}
-      >
-        {withLeadingIcon}
-        {children}
-        {tag}
-
-        {!!label && (
-          <TextFieldLabel htmlFor={tagProps.id}>{label}</TextFieldLabel>
-        )}
-
-        {withTrailingIcon}
-        <TextFieldBottomLine />
-      </TextFieldRoot>
-    );
-  }
+    static displayName = 'TextField';
+    render() {
+      const {
+        label = '',
+        className,
+        inputRef,
+        box,
+        fullwidth,
+        withLeadingIcon,
+        withTrailingIcon,
+        mdcElementRef,
+        children,
+        textarea,
+        rootProps = {},
+        ...rest
+      } = this.props;
+
+      const tagProps = {
+        ...rest,
+        elementRef: inputRef,
+        id: rest.id || Date.now() + Math.random() + ''
+      };
+
+      const tag = textarea ? (
+        <TextFieldTextarea {...tagProps} />
+      ) : (
+        <TextFieldInput {...tagProps} />
+      );
+
+      return (
+        <TextFieldRoot
+          {...rootProps}
+          className={classNames(className, rootProps.className, {
+            'mdc-text-field--with-leading-icon': !!withLeadingIcon,
+            'mdc-text-field--with-trailing-icon': !!withTrailingIcon
+          })}
+          textarea={textarea}
+          box={box}
+          fullwidth={fullwidth}
+          elementRef={mdcElementRef}
+        >
+          {withLeadingIcon}
+          {children}
+          {tag}
+
+          {!!label && (
+            <TextFieldLabel htmlFor={tagProps.id} value={tagProps.value}>
+              {label}
+            </TextFieldLabel>
+          )}
+
+          {withTrailingIcon}
+          <TextFieldBottomLine />
+        </TextFieldRoot>
+      );
+    }
   }
 );