fix(text-field): floating label width calculation when notched (#347)

material-components · Oct 17, 2018 · 377f250 · 377f250
1 parent 28f5378
commit 377f250
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/packages/text-field/index.js b/packages/text-field/index.js
@@ -52,7 +52,8 @@ class TextField extends React.Component {
 
       // floating label state
       labelIsFloated: false,
-      labelWidth: 0,
+      initialLabelWidth: 0,
+      notchedLabelWidth: 0,
 
       // line ripple state
       activeLineRipple: false,
@@ -198,7 +199,7 @@ class TextField extends React.Component {
       },
       floatLabel: (labelIsFloated) => this.setState({labelIsFloated}),
       hasLabel: () => !!this.props.label,
-      getLabelWidth: () => this.state.labelWidth,
+      getLabelWidth: () => this.state.initialLabelWidth,
     };
   }
 
@@ -212,7 +213,7 @@ class TextField extends React.Component {
 
   get notchedOutlineAdapter() {
     return {
-      notchOutline: () => this.setState({outlineIsNotched: true}),
+      notchOutline: (notchedLabelWidth) => this.setState({outlineIsNotched: true, notchedLabelWidth}),
       closeOutline: () => this.setState({outlineIsNotched: false}),
       hasOutline: () => !!this.props.outlined,
     };
@@ -292,7 +293,7 @@ class TextField extends React.Component {
         className={floatingLabelClassName}
         float={this.state.labelIsFloated}
         handleWidthChange={
-          (labelWidth) => this.setState({labelWidth})}
+          (initialLabelWidth) => this.setState({initialLabelWidth})}
         ref={this.floatingLabelElement}
         htmlFor={inputId}
       >
@@ -315,13 +316,13 @@ class TextField extends React.Component {
 
   renderNotchedOutline() {
     const {notchedOutlineClassName} = this.props;
-    const {outlineIsNotched, labelWidth} = this.state;
+    const {outlineIsNotched, notchedLabelWidth} = this.state;
     return (
       <NotchedOutline
         className={notchedOutlineClassName}
         isRtl={this.props.isRtl}
         notch={outlineIsNotched}
-        notchWidth={labelWidth}
+        notchWidth={notchedLabelWidth}
       />
     );
   }

diff --git a/test/unit/text-field/index.test.js b/test/unit/text-field/index.test.js
@@ -202,6 +202,12 @@ test('#adapter.label.hasLabel returns true if label exists', () => {
   div.remove();
 });
 
+test('#adapter.label.getLabelWidth returns state.initialLabelWidth', () => {
+  const wrapper = shallow(<TextField label='my label'><Input /></TextField>);
+  wrapper.setState({initialLabelWidth: 88});
+  assert.equal(wrapper.instance().foundation_.adapter_.getLabelWidth(), 88);
+});
+
 test('#adapter.lineRipple.activeLineRipple sets state.activeLineRipple to true', () => {
   const wrapper = shallow(
     <TextField label='my label'><Input /></TextField>);
@@ -229,6 +235,12 @@ test('#adapter.notchedOutline.notchOutline sets state.outlineIsNotched to true',
   assert.isTrue(wrapper.state().outlineIsNotched);
 });
 
+test('#adapter.notchedOutline.notchOutline sets state.notchedLabelWidth', () => {
+  const wrapper = shallow(<TextField label='my label'><Input /></TextField>);
+  wrapper.instance().foundation_.adapter_.notchOutline(90);
+  assert.equal(wrapper.state().notchedLabelWidth, 90);
+});
+
 test('#adapter.notchedOutline.closeOutline sets state.outlineIsNotched to false', () => {
   const wrapper = shallow(<TextField label='my label'><Input /></TextField>);
   wrapper.instance().foundation_.adapter_.closeOutline();
@@ -329,7 +341,7 @@ test('renders helperText if helperText prop is passed', () => {
 });
 
 test('renders textarea if textarea variant', () => {
-  const wrapper = mount(<TextField textarea><Input /></TextField>);
+  const wrapper = mount(<TextField label='my label' textarea><Input /></TextField>);
   assert.equal(wrapper.find('textarea').length, 1);
 });