fix(slider): ensure input fires on track interaction (#5554)

* test(sp-slider): regression test for input emit from track

* fix(sp-slider): ensure input is fired with track interaction

* chore(sp-slider): add changeset

---------

Co-authored-by: Rajdeep Chandra <[email protected]>

Author: augustjk

.changeset/quiet-cars-taste.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/slider': patch
+---
+
+Editable sliders will now reliably emit `input` events when interaction starts with the track.

packages/slider/src/HandleController.ts

@@ -121,15 +121,15 @@ export class HandleController {
         if (!elements) return;
 
         const { input } = elements;
-        if (input.valueAsNumber === handle.value) {
-            if (handle.dragging) {
-                handle.dispatchInputEvent();
-            }
-        } else {
-            input.valueAsNumber = handle.value;
-            this.requestUpdate();
-        }
+
+        input.valueAsNumber = handle.value;
+        this.requestUpdate();
+        // reset to potentially clamped value
         handle.value = input.valueAsNumber;
+
+        if (handle.dragging) {
+            handle.dispatchInputEvent();
+        }
     }
 
     public handleHasChanged(handle: SliderHandle): void {

packages/slider/test/index.ts

@@ -110,24 +110,22 @@ export const testEditableSlider = (type: string): void => {
         it('dispatches `input` of the animation frame', async () => {
             const inputSpy = spy();
             const changeSpy = spy();
-            const el = await fixture<Slider>(
-                html`
-                    <sp-slider
-                        editable
-                        hide-stepper
-                        min="1"
-                        max="100"
-                        step="1"
-                        label="Slider label"
-                        @input=${(event: Event & { target: Slider }) => {
-                            inputSpy(event.target.value);
-                        }}
-                        @change=${(event: Event & { target: Slider }) => {
-                            changeSpy(event.target.value);
-                        }}
-                    ></sp-slider>
-                `
-            );
+            const el = await fixture<Slider>(html`
+                <sp-slider
+                    editable
+                    hide-stepper
+                    min="1"
+                    max="100"
+                    step="1"
+                    label="Slider label"
+                    @input=${(event: Event & { target: Slider }) => {
+                        inputSpy(event.target.value);
+                    }}
+                    @change=${(event: Event & { target: Slider }) => {
+                        changeSpy(event.target.value);
+                    }}
+                ></sp-slider>
+            `);
             await elementUpdated(el);
             expect(el.value).to.equal(50.5);
 
@@ -364,5 +362,83 @@ export const testEditableSlider = (type: string): void => {
                 el.handleController.inputForHandle(el)
             );
         });
+
+        // regression test for https://github.com/adobe/spectrum-web-components/issues/5522
+        it('dispatches `input` on track interaction after handle interaction', async () => {
+            const inputSpy = spy();
+            const changeSpy = spy();
+
+            const el = await fixture<Slider>(html`
+                <sp-slider
+                    editable
+                    hide-stepper
+                    min="1"
+                    max="100"
+                    step="1"
+                    label="Slider label"
+                    @input=${(event: Event & { target: Slider }) => {
+                        inputSpy(event.target.value);
+                    }}
+                    @change=${(event: Event & { target: Slider }) => {
+                        changeSpy(event.target.value);
+                    }}
+                ></sp-slider>
+            `);
+            await elementUpdated(el);
+            expect(el.value).to.equal(50.5);
+
+            expect(inputSpy.callCount, 'start clean').to.equal(0);
+            expect(changeSpy.callCount, 'start clean').to.equal(0);
+
+            const handle = el.shadowRoot.querySelector(
+                '.handle'
+            ) as HTMLDivElement;
+
+            const rect = handle.getBoundingClientRect();
+
+            // click handle once
+            await sendMouse({
+                steps: [
+                    {
+                        type: 'move',
+                        position: [
+                            rect.left + rect.width / 2,
+                            rect.top + rect.height / 2,
+                        ],
+                    },
+                    {
+                        type: 'down',
+                    },
+                    { type: 'up' },
+                ],
+            });
+
+            await elementUpdated(el);
+
+            expect(changeSpy.callCount, 'one change').to.equal(1);
+            expect(inputSpy.callCount, 'no input').to.equal(0);
+
+            // move to and click track once
+            await sendMouse({
+                steps: [
+                    {
+                        type: 'move',
+                        position: [
+                            rect.left - rect.width,
+                            rect.top + rect.height / 2,
+                        ],
+                    },
+                    {
+                        type: 'down',
+                    },
+                    { type: 'up' },
+                ],
+            });
+
+            await elementUpdated(el);
+
+            expect(changeSpy.callCount, 'one additional change').to.equal(2);
+            expect(inputSpy.callCount, 'one input').to.equal(1);
+        });
     });
 };