fix(range): step change

ovh · Jul 29, 2024 · 79ef842 · 79ef842
1 parent 851204c
commit 79ef842
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/packages/ods/src/components/range/src/components/ods-range/ods-range.tsx b/packages/ods/src/components/range/src/components/ods-range/ods-range.tsx
@@ -14,12 +14,12 @@ import { type OdsRangeValueChangeEventDetail } from '../../interfaces/event';
   tag: 'ods-range',
 })
 export class OdsRange {
-  private inputRangeId = 'input-range';
-  private inputRangeDualId = 'input-range-dual';
-
   private hostId: string = '';
   private inputEl?: HTMLInputElement;
   private inputElDual?: HTMLInputElement;
+  private inputObservable?: MutationObserver;
+  private inputRangeId = 'input-range';
+  private inputRangeDualId = 'input-range-dual';
   private tooltip?: OdsTooltip;
   private tooltipDual?: OdsTooltip;
 
@@ -106,9 +106,12 @@ export class OdsRange {
     setFormValue(this.internals, this.value);
   }
 
-  @Watch('step')
-  onStepChange(): void {
-    this.onInput();
+  onInputElChange(mutationList: MutationRecord[]): void {
+    for (const mutation of mutationList) {
+      if(mutation.attributeName && ['step', 'min', 'max'].includes(mutation.attributeName)) {
+        this.onInput();
+      }
+    }
   }
 
   componentWillLoad(): void {
@@ -121,6 +124,18 @@ export class OdsRange {
     this.onValueChange();
   }
 
+  componentDidLoad(): void {
+    this.inputObservable = new MutationObserver(this.onInputElChange.bind(this));
+
+    if (this.inputEl) {
+      this.inputObservable.observe(this.inputEl, { attributes: true });
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.inputObservable?.disconnect();
+  }
+
   async formResetCallback(): Promise<void> {
     await this.reset();
   }

diff --git a/packages/ods/src/components/range/tests/rendering/ods-range.spec.ts b/packages/ods/src/components/range/tests/rendering/ods-range.spec.ts
@@ -3,6 +3,17 @@ import type { SpecPage } from '@stencil/core/testing';
 import { newSpecPage } from '@stencil/core/testing';
 import { OdsRange } from '../../src';
 
+const mutationObserverMock = jest.fn(function MutationObserver(callback) {
+  this.observe = jest.fn();
+  this.disconnect = jest.fn();
+  // Optionally add a trigger() method to manually trigger a change
+  this.trigger = function(mockedMutationsList: MutationRecord[]): void {
+    callback(mockedMutationsList, this);
+  };
+});
+// @ts-ignore mock
+global.MutationObserver = mutationObserverMock;
+
 describe('ods-range rendering', () => {
   let page: SpecPage;
   let root: HTMLElement | undefined;