feat: stop native input event, fire custom event on user interaction (#11014)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: web-padawan

packages/slider/src/vaadin-range-slider.d.ts

@@ -16,6 +16,13 @@ export type RangeSliderChangeEvent = Event & {
   target: RangeSlider;
 };
 
+/**
+ * Fired when the slider value changes during user interaction.
+ */
+export type RangeSliderInputEvent = Event & {
+  target: RangeSlider;
+};
+
 /**
  * Fired when the `value` property changes.
  */
@@ -27,6 +34,7 @@ export interface RangeSliderCustomEventMap {
 
 export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCustomEventMap {
   change: RangeSliderChangeEvent;
+  input: RangeSliderInputEvent;
 }
 
 /**
@@ -74,6 +82,7 @@ export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCus
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
 declare class RangeSlider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {

packages/slider/src/vaadin-range-slider.js

@@ -63,6 +63,7 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
  * @customElement
@@ -330,25 +331,31 @@ class RangeSlider extends FieldMixin(
 
   /** @private */
   __onStartInput(event) {
+    event.stopPropagation();
+
     // Use second input value as first input max limit
     if (parseFloat(event.target.value) > this.__value[1]) {
       event.target.value = this.__value[1];
     }
 
     const value = event.target.value;
     this.__updateValue(value, 0);
+    this.__dispatchInputEvent();
     this.__commitValue();
   }
 
   /** @private */
   __onEndInput(event) {
+    event.stopPropagation();
+
     // Use first input value as second input min limit
     if (parseFloat(event.target.value) < this.__value[0]) {
       event.target.value = this.__value[0];
     }
 
     const value = event.target.value;
     this.__updateValue(value, 1);
+    this.__dispatchInputEvent();
     this.__commitValue();
   }
 

packages/slider/src/vaadin-slider-mixin.js

@@ -163,6 +163,11 @@ export const SliderMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __dispatchInputEvent() {
+      this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    }
+
     /** @private */
     __detectAndDispatchChange() {
       if (JSON.stringify(this.__lastCommittedValue) !== JSON.stringify(this.value)) {
@@ -180,6 +185,12 @@ export const SliderMixin = (superClass) =>
       this.__detectAndDispatchChange();
     }
 
+    /**
+     * Fired when the slider value changes during user interaction.
+     *
+     * @event input
+     */
+
     /**
      * Fired when the user commits a value change.
      *

packages/slider/src/vaadin-slider.d.ts

@@ -16,6 +16,13 @@ export type SliderChangeEvent = Event & {
   target: Slider;
 };
 
+/**
+ * Fired when the slider value changes during user interaction.
+ */
+export type SliderInputEvent = Event & {
+  target: Slider;
+};
+
 /**
  * Fired when the `value` property changes.
  */
@@ -27,6 +34,7 @@ export interface SliderCustomEventMap {
 
 export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMap {
   change: SliderChangeEvent;
+  input: SliderInputEvent;
 }
 
 /**
@@ -72,6 +80,7 @@ export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMa
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
 declare class Slider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {

packages/slider/src/vaadin-slider.js

@@ -60,6 +60,7 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
  * @customElement
@@ -253,7 +254,9 @@ class Slider extends FieldMixin(
 
   /** @private */
   __onInput(event) {
+    event.stopPropagation();
     this.__updateValue(event.target.value, 0);
+    this.__dispatchInputEvent();
     this.__commitValue();
   }
 

packages/slider/test/range-slider-keyboard.test.ts

@@ -0,0 +1,191 @@
+import { expect } from '@vaadin/chai-plugins';
+import { sendKeys } from '@vaadin/test-runner-commands';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import sinon from 'sinon';
+import '../vaadin-range-slider.js';
+import type { RangeSlider } from '../vaadin-range-slider.js';
+
+window.Vaadin ??= {};
+window.Vaadin.featureFlags ??= {};
+window.Vaadin.featureFlags.sliderComponent = true;
+
+describe('vaadin-range-slider - keyboard input', () => {
+  let slider: RangeSlider;
+  let inputs: HTMLInputElement[];
+
+  beforeEach(async () => {
+    slider = fixtureSync('<vaadin-range-slider></vaadin-range-slider>');
+    await nextRender();
+    inputs = [...slider.querySelectorAll('input')];
+  });
+
+  describe('start thumb', () => {
+    beforeEach(() => {
+      inputs[0].focus();
+    });
+
+    it('should increase lower value boundary on first input Arrow Right', async () => {
+      await sendKeys({ press: 'ArrowRight' });
+      expect(slider.value).to.deep.equal([1, 100]);
+    });
+
+    it('should increase lower value boundary on first input Arrow Up', async () => {
+      await sendKeys({ press: 'ArrowUp' });
+      expect(slider.value).to.deep.equal([1, 100]);
+    });
+
+    it('should decrease lower value boundary on first input Arrow Left', async () => {
+      slider.value = [10, 100];
+      await sendKeys({ press: 'ArrowLeft' });
+      expect(slider.value).to.deep.equal([9, 100]);
+    });
+
+    it('should increase lower value boundary on first input Arrow Down', async () => {
+      slider.value = [10, 100];
+      await sendKeys({ press: 'ArrowDown' });
+      expect(slider.value).to.deep.equal([9, 100]);
+    });
+
+    it('should not decrease lower value boundary past min value', async () => {
+      await sendKeys({ press: 'ArrowLeft' });
+      expect(slider.value).to.deep.equal([0, 100]);
+    });
+
+    it('should not increase lower value boundary past upper boundary', async () => {
+      slider.value = [10, 10];
+      await sendKeys({ press: 'ArrowRight' });
+      expect(slider.value).to.deep.equal([10, 10]);
+    });
+
+    it('should suppress input when trying to increase value past upper boundary on Arrow Right', async () => {
+      const spy = sinon.spy();
+      inputs[0].addEventListener('input', spy);
+
+      slider.value = [10, 10];
+
+      await sendKeys({ press: 'ArrowRight' });
+      expect(spy).to.be.not.called;
+      expect(inputs[0].value).to.equal('10');
+    });
+
+    it('should suppress input when trying to increase value past upper boundary on Arrow Up', async () => {
+      const spy = sinon.spy();
+      inputs[0].addEventListener('input', spy);
+
+      slider.value = [10, 10];
+
+      await sendKeys({ press: 'ArrowUp' });
+      expect(spy).to.be.not.called;
+      expect(inputs[0].value).to.equal('10');
+    });
+
+    it('should fire single change event on first input value change', async () => {
+      const spy = sinon.spy();
+      slider.addEventListener('change', spy);
+      await sendKeys({ press: 'ArrowRight' });
+      expect(spy).to.be.calledOnce;
+    });
+
+    it('should fire single input event on first input value change', async () => {
+      const spy = sinon.spy();
+      slider.addEventListener('input', spy);
+      await sendKeys({ press: 'ArrowRight' });
+      expect(spy).to.be.calledOnce;
+    });
+  });
+
+  describe('end thumb', () => {
+    beforeEach(() => {
+      inputs[1].focus();
+    });
+
+    it('should increase upper value boundary on second input Arrow Right', async () => {
+      slider.value = [1, 50];
+      await sendKeys({ press: 'ArrowRight' });
+      expect(slider.value).to.deep.equal([1, 51]);
+    });
+
+    it('should increase upper value boundary on second input Arrow Up', async () => {
+      slider.value = [1, 50];
+      await sendKeys({ press: 'ArrowUp' });
+      expect(slider.value).to.deep.equal([1, 51]);
+    });
+
+    it('should decrease upper value boundary on second input Arrow Left', async () => {
+      await sendKeys({ press: 'ArrowLeft' });
+      expect(slider.value).to.deep.equal([0, 99]);
+    });
+
+    it('should decrease upper value boundary on second input Arrow Down', async () => {
+      await sendKeys({ press: 'ArrowDown' });
+      expect(slider.value).to.deep.equal([0, 99]);
+    });
+
+    it('should not increase upper value boundary past max value', async () => {
+      await sendKeys({ press: 'ArrowRight' });
+      expect(slider.value).to.deep.equal([0, 100]);
+    });
+
+    it('should not decrease lower value boundary past lower boundary', async () => {
+      slider.value = [10, 10];
+      await sendKeys({ press: 'ArrowLeft' });
+      expect(slider.value).to.deep.equal([10, 10]);
+    });
+
+    it('should suppress input when trying to decrease value past lower boundary on Arrow Left', async () => {
+      const spy = sinon.spy();
+      inputs[1].addEventListener('input', spy);
+
+      slider.value = [10, 10];
+
+      await sendKeys({ press: 'ArrowLeft' });
+      expect(spy).to.be.not.called;
+      expect(inputs[1].value).to.equal('10');
+    });
+
+    it('should suppress input when trying to decrease value past lower boundary on Arrow Down', async () => {
+      const spy = sinon.spy();
+      inputs[1].addEventListener('input', spy);
+
+      slider.value = [10, 10];
+
+      await sendKeys({ press: 'ArrowDown' });
+      expect(spy).to.be.not.called;
+      expect(inputs[1].value).to.equal('10');
+    });
+
+    it('should fire single change event on second input value change', async () => {
+      const spy = sinon.spy();
+      slider.addEventListener('change', spy);
+      await sendKeys({ press: 'ArrowLeft' });
+      expect(spy).to.be.calledOnce;
+    });
+
+    it('should fire single input event on second input value change', async () => {
+      const spy = sinon.spy();
+      slider.addEventListener('input', spy);
+      await sendKeys({ press: 'ArrowLeft' });
+      expect(spy).to.be.calledOnce;
+    });
+
+    it('should preserve decimals when changing value using fractional step', async () => {
+      slider.value = [0, 3];
+      slider.step = 1.5;
+      await sendKeys({ press: 'ArrowLeft' });
+      expect(slider.value).to.deep.equal([0, 1.5]);
+    });
+
+    it('should not increase value past max allowed value with fractional step', async () => {
+      slider.value = [0, 99];
+      slider.step = 1.5;
+      await sendKeys({ press: 'ArrowRight' });
+      expect(slider.value).to.deep.equal([0, 99]);
+    });
+
+    it('should not change value on arrow key when readonly', async () => {
+      slider.readonly = true;
+      await sendKeys({ press: 'ArrowRight' });
+      expect(slider.value).to.deep.equal([0, 100]);
+    });
+  });
+});

packages/slider/test/range-slider-pointer.test.ts

@@ -149,6 +149,36 @@ window.Vaadin.featureFlags.sliderComponent = true;
     });
   });
 
+  describe('input event', () => {
+    let spy: sinon.SinonSpy;
+
+    beforeEach(() => {
+      spy = sinon.spy();
+      slider.addEventListener('input', spy);
+    });
+
+    it('should fire on thumb pointermove', async () => {
+      const { x, y } = middleOfThumb(0);
+
+      await sendMouseToElement({ type: 'move', element: thumbs[0] });
+      await sendMouse({ type: 'down' });
+      await sendMouse({ type: 'move', position: [x + 20, y] });
+
+      expect(spy).to.be.calledOnce;
+    });
+
+    it('should fire on track pointerdown', async () => {
+      slider.value = [20, 80];
+
+      const { x, y } = middleOfThumb(0);
+
+      await sendMouse({ type: 'move', position: [x - 20, y] });
+      await sendMouse({ type: 'down' });
+
+      expect(spy).to.be.calledOnce;
+    });
+  });
+
   describe('track', () => {
     beforeEach(() => {
       slider.value = [20, 80];