fix: Update attributes and prevent infinite loops

- Implement `_suppressAttributeChange` flag to avoid recursive attribute change callbacks.
node-projects · Jun 23, 2024 · 77c8221 · 77c8221
1 parent 1d2f344
commit 77c8221
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/slider/SliderWebcomponent.ts b/src/slider/SliderWebcomponent.ts
@@ -128,36 +128,46 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
     private _rangeInputs: HTMLInputElement[];
     private _ready: Boolean = false;
     private _valuesGap: number = 1;
+    private _suppressAttributeChange: boolean = false;
 
     public get valueMin() {
         return this.getAttribute('value-min');
     }
     public set valueMin(value) {
+        this._suppressAttributeChange = true;
         this.setAttribute('value-min', value.toString());
+        this._suppressAttributeChange = false;
     }
 
     public get valueMax() {
         return this.getAttribute('value-max');
     }
     public set valueMax(value) {
+        this._suppressAttributeChange = true;
         this.setAttribute('value-max', value.toString());
+        this._suppressAttributeChange = false;
     }
 
     public get min() {
         return this.getAttribute('min');
     }
     public set min(value) {
+        this._suppressAttributeChange = true;
         this.setAttribute('min', value.toString());
+        this._suppressAttributeChange = false;
     }
 
     public get max() {
         return this.getAttribute('max');
     }
     public set max(value) {
+        this._suppressAttributeChange = true;
         this.setAttribute('max', value.toString());
+        this._suppressAttributeChange = false;
     }
 
     attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (this._suppressAttributeChange) return;
         if (name == "value-min") {
             this._valueMinAttributeChanged();
         }
@@ -230,7 +240,6 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
             });
         }
 
-
         this._ready = true;
 
         this._updateInputValues();
@@ -294,6 +303,8 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
                 this._updateSliderPosition(maxp, value2, false);
             }
         }
+        this.valueMin = this._rangeInputs[0].value;
+        this.valueMax = this._rangeInputs[1].value;
     }
 
     private _updateSliderPosition(value: number, max: number, isMin: boolean) {