fix(text-field): fixed a bug where the label element was incorrectly …

…being styled when in the "dense" density
tyler-technologies-oss · Oct 7, 2023 · e4b2da6 · e4b2da6
1 parent bf35b55
commit e4b2da6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/src/lib/field/field-foundation.ts b/src/lib/field/field-foundation.ts
@@ -121,8 +121,9 @@ export class FieldFoundation {
       if (this._isInitialized) {
         this._applyDensity();
 
-        // We only need to initialize the label if we are changing from dense to non-dense or vice versa
-        if (this._density === 'dense' || prevDensity === 'dense') {
+        if (this._density === 'dense') {
+          this._destroyFloatingLabel({ cancelFloat: true });
+        } else if (prevDensity === 'dense') {
           this._initializeLabel();
         }
       }
@@ -241,22 +242,26 @@ export class FieldFoundation {
   }
 
   protected _initializeLabel(): void {
-    if (this._floatingLabel) {
-      this._floatingLabel.destroy();
-    }
+    this._floatingLabel?.destroy();
     this._adapter.detectLabel();
+
     if (this._adapter.hasLabel() && this._density !== 'dense') {
       this._floatingLabel = this._adapter.initializeFloatingLabel();
       this._adapter.ensureLabelOrder();
       this.floatLabel(this._floatLabelType === 'always' || this._adapter.fieldHasValue() || this._adapter.hasPlaceholder());
       this._adapter.setRootClass(FIELD_CONSTANTS.classes.LABEL);
     } else {
-      this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
-      this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
-      this._floatingLabel = undefined;
+      this._destroyFloatingLabel();
     }
   }
 
+  private _destroyFloatingLabel({ cancelFloat = false } = {}): void {
+    this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
+    this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
+    this._floatingLabel?.destroy({ cancelFloat });
+    this._floatingLabel = undefined;
+  }
+
   protected _detectLeadingContent(): void {
     if (this._adapter.hasLeadingNodes()) {
       this._adapter.setRootClass(FIELD_CONSTANTS.classes.LEADING);

diff --git a/src/lib/floating-label/floating-label-foundation.ts b/src/lib/floating-label/floating-label-foundation.ts
@@ -4,6 +4,7 @@ import { Platform } from '@tylertech/forge-core';
 
 export class FloatingLabelFoundation {
   private _floatAnimationEndHandler: () => void;
+  private _activeFrame: number | undefined;
 
   constructor(protected _adapter: IFloatingLabelAdapter) {
     this._floatAnimationEndHandler = () => this._handleFloatAnimationEnd();
@@ -19,11 +20,16 @@ export class FloatingLabelFoundation {
     }
   }
 
-  public disconnect(): void {
+  public disconnect({ cancelFloat = false } = {}): void {
+    if (cancelFloat && this._activeFrame) {
+      window.cancelAnimationFrame(this._activeFrame);
+    }
+
     this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOATING_LABEL);
     this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
     this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
     this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
+
     if (this._floatAnimationEndHandler) {
       this._adapter.removeLabelListener('transitionend', this._floatAnimationEndHandler);
     }
@@ -34,9 +40,9 @@ export class FloatingLabelFoundation {
       if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME)) {
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
       }
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          if (alwaysFloat || this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE)) {
+      this._activeFrame = window.requestAnimationFrame(() => {
+        this._activeFrame = window.requestAnimationFrame(() => {
+          if (alwaysFloat || this.isFloating) {
             this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
           }
           this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
@@ -47,8 +53,9 @@ export class FloatingLabelFoundation {
       if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME)) {
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
         this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
+
+        this._activeFrame = window.requestAnimationFrame(() => {
+          this._activeFrame = window.requestAnimationFrame(() => {
             this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
           });
         });

diff --git a/src/lib/floating-label/floating-label.ts b/src/lib/floating-label/floating-label.ts
@@ -5,7 +5,7 @@ export interface IFloatingLabel {
   isFloating: boolean;
   float(float: boolean, alwaysFloat?: boolean): void;
   getWidth(): number;
-  destroy(): void;
+  destroy(opts?: { cancelFloat?: boolean }): void;
 }
 
 export class FloatingLabel implements IFloatingLabel {
@@ -21,8 +21,8 @@ export class FloatingLabel implements IFloatingLabel {
     return this._foundation.isFloating;
   }
 
-  public destroy(): void {
-    this._foundation.disconnect();
+  public destroy({ cancelFloat = false } = {}): void {
+    this._foundation.disconnect({ cancelFloat });
     this._labelElement = undefined as any;
   }