From 7b7cad98704c21d8c7bef936fe58b603ef299bd1 Mon Sep 17 00:00:00 2001
From: Ashley Ryan <asryan@vmware.com>
Date: Wed, 24 Aug 2022 09:41:32 -0400
Subject: [PATCH] fix(range): update track width when value is changed
 programmatically

fixes #157

the input event doesn't fire when the value is changed in code, so listen for the property change
---
 projects/core/custom-elements.json            | 11 ++++++++++-
 projects/core/src/range/range.element.spec.ts | 10 ++++++++++
 projects/core/src/range/range.element.ts      | 15 ++++++++++++---
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/projects/core/custom-elements.json b/projects/core/custom-elements.json
index 06b0ad97b..1e493daf5 100644
--- a/projects/core/custom-elements.json
+++ b/projects/core/custom-elements.json
@@ -53135,7 +53135,16 @@
             {
               "kind": "method",
               "name": "setTrackWidth",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "val",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
diff --git a/projects/core/src/range/range.element.spec.ts b/projects/core/src/range/range.element.spec.ts
index f034c6306..82b52c321 100644
--- a/projects/core/src/range/range.element.spec.ts
+++ b/projects/core/src/range/range.element.spec.ts
@@ -47,4 +47,14 @@ describe('cds-range', () => {
     await componentIsStable(component);
     expect(getCssPropertyValue('--track-width', component)).toBe('77%');
   });
+
+  it('should update the track width style when the value is changed programmatically (no input event)', async () => {
+    await componentIsStable(component);
+    expect(getCssPropertyValue('--track-width', component)).toBe('50%');
+
+    component.inputControl.value = '75';
+
+    await componentIsStable(component);
+    expect(getCssPropertyValue('--track-width', component)).toBe('75%');
+  });
 });
diff --git a/projects/core/src/range/range.element.ts b/projects/core/src/range/range.element.ts
index f4feff237..9a437a4e8 100644
--- a/projects/core/src/range/range.element.ts
+++ b/projects/core/src/range/range.element.ts
@@ -5,7 +5,7 @@
  */
 
 import { html, PropertyValues } from 'lit';
-import { globalStyle } from '@cds/core/internal';
+import { getElementUpdates, globalStyle } from '@cds/core/internal';
 import { CdsControl } from '@cds/core/forms';
 import globalStyles from './range.global.scss';
 import styles from './range.element.scss';
@@ -51,10 +51,19 @@ export class CdsRange extends CdsControl {
     super.firstUpdated(props);
     this.setTrackWidth();
     this.inputControl.addEventListener('input', () => this.setTrackWidth());
+
+    // `input` event doesnt fire when the value is changed programmatically
+    // at this point, inputControl.valueAsNumber is still the old value
+    // https://github.com/vmware-clarity/core/issues/157
+    this.observers.push(
+      getElementUpdates(this.inputControl, 'value', (value: number) => {
+        this.setTrackWidth(value);
+      })
+    );
   }
 
-  private setTrackWidth() {
-    const value = this.inputControl.valueAsNumber;
+  private setTrackWidth(val?: number) {
+    const value = val ?? this.inputControl.valueAsNumber;
     const min = this.inputControl.min ? parseInt(this.inputControl.min) : 0;
     const max = this.inputControl.max ? parseInt(this.inputControl.max) : 100;
     this.style.setProperty('--track-width', `${Math.floor(((value - min) / (max - min)) * 100)}%`);