From 28c5ef4f31476179d1f4ce9e9bf7fabfb6f21f6e Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Thu, 3 Dec 2020 20:37:38 -0500 Subject: [PATCH] fix(slider): allow pointer interactions that start at the very begin/end to be tracked --- packages/slider/src/Slider.ts | 9 +++++---- packages/slider/test/slider.test.ts | 16 +++++++++++----- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts index 2ddc772e84..edfbe483fd 100644 --- 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`
- ${this.renderTrackLeft()} ${this.renderRamp()} - ${this.renderTicks()} ${this.renderHandle()} - ${this.renderTrackRight()} +
+ ${this.renderTrackLeft()} ${this.renderRamp()} + ${this.renderTicks()} ${this.renderHandle()} + ${this.renderTrackRight()} +
`; } diff --git a/packages/slider/test/slider.test.ts b/packages/slider/test/slider.test.ts index ef0928ead7..cc2405f8cb 100644 --- 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 margin by default + clientX: 9, pointerId: 4, + bubbles: true, }) ); controls.dispatchEvent( new MouseEvent('mousedown', { - clientX: 50, + // account for 8px 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( @@ -276,12 +280,14 @@ describe('Slider', () => { controls.dispatchEvent( new MouseEvent('mousedown', { - clientX: 50, + // account for 8px 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 () => {