fix(slider): allow pointer interactions that start at the very begin/…

…end to be tracked
adobe · Dec 8, 2020 · 28c5ef4 · 28c5ef4
1 parent 7bf317e
commit 28c5ef4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
@@ -283,13 +283,14 @@ export class Slider extends Focusable {
     private renderTrack(): TemplateResult {
         return html`
             <div
-                id="controls"
                 @pointerdown=${this.onTrackPointerDown}
                 @mousedown=${this.onTrackMouseDown}
             >
-                ${this.renderTrackLeft()} ${this.renderRamp()}
-                ${this.renderTicks()} ${this.renderHandle()}
-                ${this.renderTrackRight()}
+                <div id="controls">
+                    ${this.renderTrackLeft()} ${this.renderRamp()}
+                    ${this.renderTicks()} ${this.renderHandle()}
+                    ${this.renderTrackRight()}
+                </div>
             </div>
         `;
     }

diff --git a/packages/slider/test/slider.test.ts b/packages/slider/test/slider.test.ts
@@ -242,19 +242,23 @@ describe('Slider', () => {
 
         controls.dispatchEvent(
             new PointerEvent('pointerdown', {
-                clientX: 50,
+                // account for 8px <body> margin by default
+                clientX: 9,
                 pointerId: 4,
+                bubbles: true,
             })
         );
         controls.dispatchEvent(
             new MouseEvent('mousedown', {
-                clientX: 50,
+                // account for 8px <body> margin by default
+                clientX: 9,
+                bubbles: true,
             })
         );
         await elementUpdated(el);
 
         expect(pointerId).to.equal(4);
-        expect(el.value).to.equal(1);
+        expect(el.value).to.equal(0);
     });
     it('will fallback to `trackMouseDown` on `#controls`', async () => {
         const el = await fixture<Slider>(
@@ -276,12 +280,14 @@ describe('Slider', () => {
 
         controls.dispatchEvent(
             new MouseEvent('mousedown', {
-                clientX: 50,
+                // account for 8px <body> margin by default
+                clientX: 9,
+                bubbles: true,
             })
         );
         await elementUpdated(el);
 
-        expect(el.value).to.equal(1);
+        expect(el.value).to.equal(0);
         ((el as unknown) as TestableSliderType).supportsPointerEvent = supportsPointerEvent;
     });
     it('can be disabled', async () => {