fix(textfield): don't transition colors when disabling

PiperOrigin-RevId: 561801775

field/internal/_content.scss

@@ -89,6 +89,10 @@ $_enter-delay: $_label-duration - $_visible-duration;
     transition-delay: $_enter-delay;
   }
 
+  :is(.disabled, .disable-transitions) .content {
+    transition: none;
+  }
+
   .content ::slotted(*) {
     all: unset;
     // Use `currentColor` to inherit the various state colors that are set

field/internal/field.ts

@@ -59,6 +59,7 @@ export class Field extends LitElement implements SurfacePositionTarget {
    * to screen readers.
    */
   @state() private refreshErrorAlert = false;
+  @state() private disableTransitions = false;
   @query('.label.floating') private readonly floatingLabelEl!: HTMLElement|null;
   @query('.label.resting') private readonly restingLabelEl!: HTMLElement|null;
   @query('.container') private readonly containerEl!: HTMLElement|null;
@@ -76,6 +77,10 @@ export class Field extends LitElement implements SurfacePositionTarget {
 
   protected override update(props: PropertyValues<Field>) {
     // Client-side property updates
+    const isDisabledChanging = props.has('disabled') && props.get('disabled') !== undefined;
+    if (isDisabledChanging) {
+      this.disableTransitions = true;
+    }
 
     // When disabling, remove focus styles if focused.
     if (this.disabled && this.focused) {
@@ -98,6 +103,7 @@ export class Field extends LitElement implements SurfacePositionTarget {
     const outline = this.renderOutline?.(floatingLabel);
     const classes = {
       'disabled': this.disabled,
+      'disable-transitions': this.disableTransitions,
       'error': this.error && !this.disabled,
       'focused': this.focused,
       'with-start': this.hasStart,
@@ -149,6 +155,12 @@ export class Field extends LitElement implements SurfacePositionTarget {
         this.refreshErrorAlert = false;
       });
     }
+
+    if (this.disableTransitions) {
+      requestAnimationFrame(() => {
+        this.disableTransitions = false;
+      });
+    }
   }
 
   protected renderBackground?(): TemplateResult;