Merge pull request #539 from 43081j:textfield-values

PiperOrigin-RevId: 273422771

packages/textfield/src/mwc-textfield-base.ts

@@ -250,6 +250,11 @@ export abstract class TextFieldBase extends FormElement {
     if (maxLengthBecameDefined || maxLengthBecameUndefined) {
       this.createFoundation();
     }
+
+    if (changedProperties.has('value') &&
+        changedProperties.get('value') !== undefined) {
+      this.mdcFoundation.setValue(this.value);
+    }
   }
 
   protected renderInput() {

packages/textfield/src/test/mwc-textfield.test.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import {cssClasses as floatingClasses} from '@material/floating-label/constants';
 import {FloatingLabel} from '@material/mwc-floating-label';
 import {TextField} from '@material/mwc-textfield';
 import {cssClasses} from '@material/textfield/constants';
@@ -57,6 +58,10 @@ const makeOutlined = (isHidden: boolean) => html`
   </mwc-textfield>
 `;
 
+const withLabel = html`
+  <mwc-textfield label="a label"></mwc-textfield>
+`;
+
 const isUiInvalid = (element: TextField) => {
   return !!element.shadowRoot!.querySelector(`.${cssClasses.INVALID}`);
 };
@@ -491,4 +496,34 @@ suite('mwc-textfield:', () => {
       }
     });
   });
+
+  suite('label', () => {
+    let element: TextField;
+
+    setup(async () => {
+      fixt = await fixture(withLabel);
+      element = fixt.root.querySelector('mwc-textfield')!;
+      await element.updateComplete;
+    });
+
+    teardown(() => {
+      if (fixt) {
+        fixt.remove();
+      }
+    });
+
+    test('label floats when value is set', async () => {
+      const floatingLabel =
+          element.shadowRoot!.querySelector('label') as FloatingLabel;
+
+      assert.isFalse(
+          floatingLabel.classList.contains(floatingClasses.LABEL_FLOAT_ABOVE));
+
+      element.value = 'foo bar';
+      await element.updateComplete;
+
+      assert.isTrue(
+          floatingLabel.classList.contains(floatingClasses.LABEL_FLOAT_ABOVE));
+    });
+  });
 });