Merge pull request material-components#5860 from ejmurc:fix-nan-transforms-hidden-field

PiperOrigin-RevId: 825691442

Author: copybara-github

field/internal/field.ts

@@ -276,6 +276,11 @@ export class Field extends LitElement {
       return;
     }
 
+    const keyframes = this.getLabelKeyframes();
+    if (!keyframes.length) {
+      return;
+    }
+
     this.isAnimating = true;
     this.labelAnimation?.cancel();
 
@@ -291,10 +296,10 @@ export class Field extends LitElement {
     // Re-calculating the animation each time will prevent any visual glitches
     // from appearing.
     // TODO(b/241113345): use animation tokens
-    this.labelAnimation = this.floatingLabelEl?.animate(
-      this.getLabelKeyframes(),
-      {duration: 150, easing: EASING.STANDARD},
-    );
+    this.labelAnimation = this.floatingLabelEl?.animate(keyframes, {
+      duration: 150,
+      easing: EASING.STANDARD,
+    });
 
     this.labelAnimation?.addEventListener('finish', () => {
       // At the end of the animation, update the visible label.
@@ -320,6 +325,10 @@ export class Field extends LitElement {
     } = restingLabelEl.getBoundingClientRect();
     const floatingScrollWidth = floatingLabelEl.scrollWidth;
     const restingScrollWidth = restingLabelEl.scrollWidth;
+    // If either label has no dimensions (e.g., display: none), skip animation
+    if (floatingScrollWidth === 0 || restingScrollWidth === 0) {
+      return [];
+    }
     // Scale by width ratio instead of font size since letter-spacing will scale
     // incorrectly. Using the width we can better approximate the adjusted
     // scale and compensate for tracking and overflow.

field/internal/field_test.ts

@@ -341,7 +341,9 @@ describe('Field', () => {
       // Test case.
       const labelValue = 'Label';
       const {instance} = await setupTest({
-        required: true, label: labelValue, noAsterisk: true
+        required: true,
+        label: labelValue,
+        noAsterisk: true,
       });
       //Assertion
       expect(instance.labelText)
@@ -408,4 +410,27 @@ describe('Field', () => {
         .toBeTrue();
     });
   });
+
+  describe('label animation', () => {
+    it('should not produce NaN transforms when populated while hidden', async () => {
+      const {instance} = await setupTest({label: 'Hidden Label'});
+      instance.style.display = 'none';
+      await env.waitForStability();
+
+      const floatingLabel =
+        instance.shadowRoot?.querySelector('.label.floating')!;
+      expect(floatingLabel).withContext('floating label element').toBeDefined();
+      const floatingLabelAnimateSpy = spyOn(
+        floatingLabel,
+        'animate',
+      ).and.callThrough();
+
+      instance.populated = true;
+      await env.waitForStability();
+
+      expect(floatingLabelAnimateSpy)
+        .withContext('floatingLabel.animate()')
+        .not.toHaveBeenCalled();
+    });
+  });
 });