chore(linear-progress): fix timing bug when setting determinate state…

… and progress together
tyler-technologies-oss · Dec 13, 2023 · 659d593 · 659d593
1 parent 9b87fa4
commit 659d593
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git a/src/lib/linear-progress/linear-progress-adapter.ts b/src/lib/linear-progress/linear-progress-adapter.ts
@@ -27,13 +27,16 @@ export class LinearProgressAdapter extends BaseAdapter<ILinearProgressComponent>
     this._component[setDefaultAria]({
       role: 'progressbar',
       ariaValueMin: '0',
-      ariaValueMax: '1'
+      ariaValueMax: '1',
+      ariaValueNow: this._component.determinate ? `${this._component.progress}` : null
     });
   }
 
   public setDeterminate(value: boolean): void {
-    if (!value) {
-      this._component[setDefaultAria]({ ariaValueNow: null });
+    this._component[setDefaultAria]({ ariaValueNow: value ? `${this._component.progress}` : null });
+    if (value) {
+      this.setProgress(this._component.progress);
+    } else {
       this._progressElement.style.transform = '';
       this._bufferElement.style.transform = '';
     }

diff --git a/src/lib/linear-progress/linear-progress-constants.ts b/src/lib/linear-progress/linear-progress-constants.ts
@@ -12,18 +12,23 @@ const selectors = {
   BUFFER: '.buffer-bar'
 };
 
-const attributes = {
+const observedAttributes = {
   DETERMINATE: 'determinate',
   PROGRESS: 'progress',
   BUFFER: 'buffer',
   THEME: 'theme'
 };
 
+const attributes = {
+  ...observedAttributes
+};
+
 export const LINEAR_PROGRESS_CONSTANTS = {
   elementName,
   classes,
   selectors,
-  attributes
+  attributes,
+  observedAttributes
 };
 
 export type LinearProgressTheme = Theme;
diff --git a/src/lib/linear-progress/linear-progress-foundation.ts b/src/lib/linear-progress/linear-progress-foundation.ts
@@ -25,6 +25,7 @@ export class LinearProgressFoundation {
     return this._determinate;
   }
   public set determinate(value: boolean) {
+    value = Boolean(value);
     if (this._determinate !== value) {
       this._determinate = value;
       this._adapter.setBuffer(this._determinate ? this._buffer : 1);
@@ -43,7 +44,7 @@ export class LinearProgressFoundation {
       if (this._determinate) {
         this._adapter.setProgress(this._progress);
       }
-      this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.PROGRESS, this._progress.toString());
+      this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.PROGRESS, String(this._progress));
     }
   }
 

diff --git a/src/lib/linear-progress/linear-progress.ts b/src/lib/linear-progress/linear-progress.ts
@@ -61,12 +61,7 @@ declare global {
 })
 export class LinearProgressComponent extends WithElementInternals(WithDefaultAria(BaseComponent)) implements ILinearProgressComponent {
   public static get observedAttributes(): string[] {
-    return [
-      LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE,
-      LINEAR_PROGRESS_CONSTANTS.attributes.PROGRESS,
-      LINEAR_PROGRESS_CONSTANTS.attributes.BUFFER,
-      LINEAR_PROGRESS_CONSTANTS.attributes.THEME
-    ];
+    return Object.values(LINEAR_PROGRESS_CONSTANTS.observedAttributes);
   }
 
   private _foundation: LinearProgressFoundation;
@@ -83,16 +78,16 @@ export class LinearProgressComponent extends WithElementInternals(WithDefaultAri
 
   public attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     switch (name) {
-      case LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE:
+      case LINEAR_PROGRESS_CONSTANTS.observedAttributes.DETERMINATE:
         this.determinate = coerceBoolean(newValue);
         break;
-      case LINEAR_PROGRESS_CONSTANTS.attributes.PROGRESS:
+      case LINEAR_PROGRESS_CONSTANTS.observedAttributes.PROGRESS:
         this.progress = coerceNumber(newValue);
         break;
-      case LINEAR_PROGRESS_CONSTANTS.attributes.BUFFER:
+      case LINEAR_PROGRESS_CONSTANTS.observedAttributes.BUFFER:
         this.buffer = coerceNumber(newValue);
         break;
-      case LINEAR_PROGRESS_CONSTANTS.attributes.THEME:
+      case LINEAR_PROGRESS_CONSTANTS.observedAttributes.THEME:
         this.theme = newValue as LinearProgressTheme;
         break;
     }