fix(range): overlap thumb

ovh · Jul 29, 2024 · 053b807 · 053b807
1 parent 4787ccc
commit 053b807
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 10 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
@@ -109,7 +109,7 @@ export class OdsRange {
   onInputElChange(mutationList: MutationRecord[]): void {
     for (const mutation of mutationList) {
       if(mutation.attributeName && ['step', 'min', 'max'].includes(mutation.attributeName)) {
-        this.onInput();
+        this.onInput(false);
       }
     }
   }
@@ -140,11 +140,15 @@ export class OdsRange {
     await this.reset();
   }
 
-  private onInput(currentInput?: HTMLInputElement, otherInput?: HTMLInputElement): void {
-    const isInputsValuesEqual = Number(this.inputEl?.value) - Number(this.inputElDual?.value) > 0;
-    if (currentInput && otherInput && isInputsValuesEqual) {
-      currentInput.value = otherInput.value;
-      return;
+  private onInput(isDualInput: boolean): void {
+    const step = this.step ?? 1;
+    const isInputsValuesEqual = Number(this.inputElDual?.value) - Number(this.inputEl?.value) < step;
+    if (isInputsValuesEqual) {
+      if (isDualInput) {
+        this.onInputElDual(step);
+      } else {
+        this.onInputEl(step);
+      }
     }
 
     this.isDualRange = isDualRange(this.value);
@@ -156,6 +160,18 @@ export class OdsRange {
     });
   }
 
+  private onInputEl(step : number): void {
+    if (this.inputEl && this.inputElDual) {
+      this.inputEl.value = `${(Number(this.inputElDual.value) ?? 0) - step}`;
+    }
+  }
+
+  private onInputElDual(step : number): void {
+    if (this.inputEl && this.inputElDual) {
+      this.inputElDual.value = `${(Number(this.inputEl.value) ?? 0) + step}`;
+    }
+  }
+
   private changeValues(currentValue?: number, dualValue?: number): number | [number, number] | undefined {
     let value: number | [number, number] | undefined;
 
@@ -209,7 +225,7 @@ export class OdsRange {
           onFocus={ () => this.odsFocus.emit() }
           onFocusin={ () => this.showTooltips() }
           onFocusout={ () => this.hideTooltips() }
-          onInput={ () => this.onInput(this.inputEl, this.inputElDual) }
+          onInput={ () => this.onInput(false) }
           onMouseOver={ () => this.showTooltips() }
           onMouseLeave={ () => this.hideTooltips() }
           part="range"
@@ -255,7 +271,7 @@ export class OdsRange {
             id={ this.inputRangeDualId }
             onFocusin={ () => this.showTooltips() }
             onFocusout={ () => this.hideTooltips() }
-            onInput={ () => this.onInput(this.inputElDual, this.inputEl) }
+            onInput={ () => this.onInput(true) }
             onMouseOver={ () => this.showTooltips() }
             onMouseLeave={ () => this.hideTooltips() }
             part="range-dual"

diff --git a/packages/ods/src/components/range/src/index.html b/packages/ods/src/components/range/src/index.html
@@ -75,6 +75,15 @@
   </ods-range>
   <script>
     const rangeDual = document.getElementById('range-dual');
+    rangeDual.value = [3, 20];
+  </script>
+
+  <p>Dual Step</p>
+  <ods-range id="range-dual-step" step="10">
+  </ods-range>
+  <script>
+    const rangeDualStep = document.getElementById('range-dual-step');
+    rangeDualStep.value = [3, 20];
   </script>
 
   <p>Dual Error</p>

diff --git a/packages/ods/src/components/range/tests/behavior/ods-range.e2e.ts b/packages/ods/src/components/range/tests/behavior/ods-range.e2e.ts
@@ -83,7 +83,7 @@ describe('ods-range behavior', () => {
       await page.keyboard.press('ArrowUp');
       await page.waitForChanges();
 
-      expect((await el.getProperty('value'))?.[0]).toBe(primaryValue);
+      expect((await el.getProperty('value'))?.[0]).toBe(primaryValue - 1);
       expect((await el.getProperty('value'))?.[1]).toBe(primaryValue);
     });
 
@@ -97,7 +97,21 @@ describe('ods-range behavior', () => {
       await page.waitForChanges();
 
       expect((await el.getProperty('value'))?.[0]).toBe(secondaryValue);
-      expect((await el.getProperty('value'))?.[1]).toBe(secondaryValue);
+      expect((await el.getProperty('value'))?.[1]).toBe(secondaryValue + 1);
+    });
+
+    it('should change value with step on dual but not upper then secondary value', async() => {
+      const secondaryValue = 70;
+      const step = 10;
+      await setup(`<ods-range step="${step}"></ods-range>`, { value: [secondaryValue, secondaryValue + (step * 2)] });
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('ArrowDown');
+      await page.waitForChanges();
+
+      expect((await el.getProperty('value'))?.[0]).toBe(secondaryValue);
+      expect((await el.getProperty('value'))?.[1]).toBe(secondaryValue + step);
     });
   });