fix(slider): resolve missing thumb reference when from and to are ini…

…tially equal (#1179) * fix(slider): resolve missing thumb reference when from and to are initially equal * test(slider): clarify comments of test cases Co-authored-by: Napat Bualoy <[email protected]> --------- Co-authored-by: Napat Bualoy <[email protected]> Co-authored-by: Theeraphat-Sorasetsakul <[email protected]>
Refinitiv · Jun 20, 2024 · b07a4ab · b07a4ab
1 parent 1e6d48f
commit b07a4ab
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 2 deletions.
diff --git a/packages/elements/src/slider/__test__/slider.event.test.js b/packages/elements/src/slider/__test__/slider.event.test.js
@@ -1085,6 +1085,63 @@ describe('slider/Events', function () {
     expect(el.to).to.equal(calculateValue(el, dragPosition100).toString());
   });
 
+  it('Drag thumb slider range "to" and "from" with show-input-field and same initial value of "to" and "from"', async function () {
+    el.range = true;
+    el.showInputField = true;
+    el.min = '0';
+    el.from = '50';
+    el.max = '100';
+    el.to = '50';
+
+    const dragPosition0 = tabSliderPosition(el, 0);
+    const dragPosition100 = tabSliderPosition(el, 100);
+
+    await elementUpdated(el);
+
+    // Drag 'to' to the lower side should not do anything
+    setTimeout(() =>
+      slider.dispatchEvent(new MouseEvent('mousedown', { clientX: dragPosition0, clientY: 0 }))
+    );
+    await oneEvent(slider, 'mousedown');
+    expect(isDragging(el)).to.be.true;
+    expect(el.from).to.equal('50');
+    expect(el.to).to.equal('50');
+
+    setTimeout(() =>
+      window.dispatchEvent(new MouseEvent('mousemove', { clientX: dragPosition0, clientY: 0 }))
+    );
+    await oneEvent(window, 'mousemove');
+
+    setTimeout(() => window.dispatchEvent(new MouseEvent('mouseup', { clientX: dragPosition0, clientY: 0 })));
+    await oneEvent(window, 'mouseup');
+    expect(isDragging(el)).to.be.false;
+
+    expect(el.from).to.equal('50');
+    expect(el.to).to.equal('50');
+
+    // Drag 'to' to the higher side should work
+    setTimeout(() =>
+      slider.dispatchEvent(new MouseEvent('mousedown', { clientX: dragPosition100, clientY: 0 }))
+    );
+    await oneEvent(slider, 'mousedown');
+    expect(isDragging(el)).to.be.true;
+    expect(el.from).to.equal('50');
+    expect(el.to).to.equal(calculateValue(el, dragPosition100).toString());
+
+    setTimeout(() =>
+      window.dispatchEvent(new MouseEvent('mousemove', { clientX: dragPosition100, clientY: 0 }))
+    );
+    await oneEvent(window, 'mousemove');
+
+    setTimeout(() =>
+      window.dispatchEvent(new MouseEvent('mouseup', { clientX: dragPosition100, clientY: 0 }))
+    );
+    await oneEvent(window, 'mouseup');
+    expect(isDragging(el)).to.be.false;
+    expect(el.from).to.equal('50');
+    expect(el.to).to.equal(calculateValue(el, dragPosition100).toString());
+  });
+
   it('Event value-changed should not fired when property programmatically set', async function () {
     const slider = await fixture('<ef-slider></ef-slider>');
     let eventCount = 0;

diff --git a/packages/elements/src/slider/elements/slider.ts b/packages/elements/src/slider/elements/slider.ts
@@ -1016,11 +1016,14 @@ export class Slider extends FormFieldElement {
       if (distanceFrom < distanceTo) {
         this.changedThumb = this.fromThumbRef.value;
         this.fromPreviousInput = this.from;
-      } else if (distanceFrom > distanceTo) {
+        // When from === to & changedThumb is already set,
+        // use its latest value and z-index will determine thumb on top.
+        // If this's the first drag, changedThumb would be unset.
+        // In that case, set changedThumb to "to" as it appears after "from" in the DOM.
+      } else if (distanceFrom > distanceTo || !this.changedThumb) {
         this.changedThumb = this.toThumbRef.value;
         this.toPreviousInput = this.to;
       }
-      // When from === to, use latest value of changedThumb and z-index will determine thumb on top
     } else {
       this.changedThumb = this.valueThumbRef.value;
       this.valuePreviousInput = this.value;