fix(range): dual value not overtake

ovh · Jul 29, 2024 · 68b49b9 · 68b49b9
1 parent 81181f2
commit 68b49b9
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 52 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
@@ -120,7 +120,13 @@ export class OdsRange {
     await this.reset();
   }
 
-  private onInput(): void {
+  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;
+    }
+
     this.isDualRange = isDualRange(this.value);
     this.value = this.changeValues(Number(this.inputEl?.value), Number(this.inputElDual?.value)) ?? null;
     this.odsChange.emit({
@@ -183,7 +189,7 @@ export class OdsRange {
           onFocus={ () => this.odsFocus.emit() }
           onFocusin={ () => this.showTooltips() }
           onFocusout={ () => this.hideTooltips() }
-          onInput={ () => this.onInput() }
+          onInput={ () => this.onInput(this.inputEl, this.inputElDual) }
           onMouseOver={ () => this.showTooltips() }
           onMouseLeave={ () => this.hideTooltips() }
           part="range"
@@ -217,52 +223,51 @@ export class OdsRange {
 
         {
           this.isDualRange &&
-          <div>
-            <input
-              class={{
-                'ods-range__range-dual': true,
-                'ods-range__range-dual--error': this.hasError,
-              }}
-              aria-valuemax={ this.max }
-              aria-valuemin={ this.min }
-              aria-valuenow={ this.value }
-              disabled={ this.isDisabled }
-              id={ this.inputRangeDualId }
-              onFocusin={ () => this.showTooltips() }
-              onFocusout={ () => this.hideTooltips() }
-              onInput={ () => this.onInput() }
-              onMouseOver={ () => this.showTooltips() }
-              onMouseLeave={ () => this.hideTooltips() }
-              part="range-dual"
-              max={ this.max }
-              min={ this.min }
-              ref={ (el?: HTMLInputElement) => this.inputElDual = el }
-              type={ ODS_INPUT_TYPE.range }
-              step={ this.step }
-              value={ this.dualValue?.toString() }
-            />
-            {
-              !this.isDisabled &&
-              <div>
-                <div
-                  class="ods-range__shadow-thumb"
-                  id="ods-range-shadow-thumb-dual"
-                  style={{
-                    left: `calc(${percentageDual}% - (${percentageDual * 0.15}px))`,
-                  }}>
-                </div>
-                <ods-tooltip
-                  position="top"
-                  ref={ (el: unknown) => this.tooltipDual = el as OdsTooltip }
-                  shadowDomTriggerId="ods-range-shadow-thumb-dual"
-                  triggerId={ this.hostId }
-                  withArrow>
-                  { this.dualValue }
-                </ods-tooltip>
-              </div>
-            }
+          <input
+            class={{
+              'ods-range__range-dual': true,
+              'ods-range__range-dual--error': this.hasError,
+            }}
+            aria-valuemax={ this.max }
+            aria-valuemin={ this.min }
+            aria-valuenow={ this.value }
+            disabled={ this.isDisabled }
+            id={ this.inputRangeDualId }
+            onFocusin={ () => this.showTooltips() }
+            onFocusout={ () => this.hideTooltips() }
+            onInput={ () => this.onInput(this.inputElDual, this.inputEl) }
+            onMouseOver={ () => this.showTooltips() }
+            onMouseLeave={ () => this.hideTooltips() }
+            part="range-dual"
+            max={ this.max }
+            min={ this.min }
+            ref={ (el?: HTMLInputElement) => this.inputElDual = el }
+            type={ ODS_INPUT_TYPE.range }
+            step={ this.step }
+            value={ this.dualValue?.toString() }
+          />
+        }
+
+        {
+          !this.isDisabled && this.isDualRange &&
+          <div
+            class="ods-range__shadow-thumb"
+            id="ods-range-shadow-thumb-dual"
+            style={{
+              left: `calc(${percentageDual}% - (${percentageDual * 0.15}px))`,
+            }}>
           </div>
         }
+        { !this.isDisabled && this.isDualRange &&
+          <ods-tooltip
+            position="top"
+            ref={ (el: unknown) => this.tooltipDual = el as OdsTooltip }
+            shadowDomTriggerId="ods-range-shadow-thumb-dual"
+            triggerId={ this.hostId }
+            withArrow>
+            { this.dualValue }
+          </ods-tooltip>
+        }
 
         <ods-text preset={ODS_TEXT_PRESET.label} class="ods-range__min">{ this.min }</ods-text>
         <ods-text preset={ODS_TEXT_PRESET.label} class="ods-range__max">{ this.max }</ods-text>

diff --git a/packages/ods/src/components/range/src/index.html b/packages/ods/src/components/range/src/index.html
@@ -70,6 +70,13 @@
   <ods-range value="40" has-error>
   </ods-range>
 
+  <p>Dual</p>
+  <ods-range id="range-dual">
+  </ods-range>
+  <script>
+    const rangeDual = document.getElementById('range-dual');
+  </script>
+
   <p>Dual Error</p>
   <ods-range id="range-dual-error" has-error>
   </ods-range>
@@ -78,12 +85,12 @@
     rangeDualError.value = [3, 20];
   </script>
 
-  <p>Dual</p>
-  <ods-range step="10" id="range-dual">
+  <p>Dual Disabled & Error</p>
+  <ods-range id="range-dual-disabled-error" is-disabled has-error>
   </ods-range>
   <script>
-    const rangeDual = document.getElementById('range-dual');
-    rangeDual.value = [3, 20];
+    const rangeDualDisabledError = document.getElementById('range-dual-disabled-error');
+    rangeDualDisabledError.value = [3, 20];
   </script>
 
   <p>Dual Disabled</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
@@ -73,6 +73,34 @@ describe('ods-range behavior', () => {
     });
   });
 
+  describe('values overtake', () => {
+    it('should change value on dual but not lower then primary value', async() => {
+      const primaryValue = 70;
+      await setup('<ods-range></ods-range>', { value: [primaryValue - 1, primaryValue] });
+
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('ArrowUp');
+      await page.keyboard.press('ArrowUp');
+      await page.waitForChanges();
+
+      expect((await el.getProperty('value'))?.[0]).toBe(primaryValue);
+      expect((await el.getProperty('value'))?.[1]).toBe(primaryValue);
+    });
+
+    it('should change value on dual but not upper then secondary value', async() => {
+      const secondaryValue = 70;
+      await setup('<ods-range></ods-range>', { value: [secondaryValue, secondaryValue + 1] });
+      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);
+    });
+  });
+
   describe('change:min&max', () => {
     it('should change value with max inf value', async() => {
       await setup('<ods-range min="0" max="100" value="50"></ods-range>');

diff --git a/packages/ods/src/style/_range.scss b/packages/ods/src/style/_range.scss
@@ -14,6 +14,7 @@ $range-background-color: var(--ods-color-neutral-300);
   border-radius: var(--ods-border-radius-sm);
   cursor: pointer;
   height: $ods-input-range-height;
+  pointer-events: none;
 
   &::-webkit-slider-thumb {
     @include thumb();
@@ -82,7 +83,7 @@ $range-background-color: var(--ods-color-neutral-300);
     }
   }
 
-  :not(:disabled) &--error {
+  &:not(:disabled)#{$range}--error {
     &::-webkit-slider-thumb {
       border-color: var(--ods-form-element-border-color-critical);
     }
@@ -106,6 +107,7 @@ $range-background-color: var(--ods-color-neutral-300);
   cursor: pointer;
   width: $ods-input-range-size-thumb;
   height: $ods-input-range-size-thumb;
+  pointer-events: auto;
 }
 
 @mixin thumb-hover-active() {
@@ -146,7 +148,7 @@ $range-background-color: var(--ods-color-neutral-300);
   .ods-range__range {
     position: absolute;
     z-index: 2;
-    margin-top: $ods-input-range-height;
+    margin-top: 6px;
     height: 0;
   }
 }