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 index c28aeedf09..a8d2aca1ea 100644 --- 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 { 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 index 7414bd4679..fa205ef625 100644 --- 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;