fix: ensure "wheel" interactions lead to a "change" event

adobe · Jan 23, 2023 · 3be87cd · 3be87cd
1 parent c071b0d
commit 3be87cd
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
@@ -310,6 +310,8 @@ export class NumberField extends TextfieldBase {
         }
     }
 
+    private queuedChangeEvent!: number;
+
     protected onScroll(event: WheelEvent): void {
         event.preventDefault();
         this.managedInput = true;
@@ -318,6 +320,13 @@ export class NumberField extends TextfieldBase {
             : event.deltaY / Math.abs(event.deltaY);
         if (direction !== 0 && !isNaN(direction)) {
             this.stepBy(direction * (event.shiftKey ? this.stepModifier : 1));
+            // Dispatch a change event after no new `input` events are queued by `wheel` interactions for 100ms.
+            clearTimeout(this.queuedChangeEvent);
+            this.queuedChangeEvent = setTimeout(() => {
+                this.dispatchEvent(
+                    new Event('change', { bubbles: true, composed: true })
+                );
+            }, 100) as unknown as number;
         }
         this.managedInput = false;
     }

diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts
@@ -11,7 +11,13 @@ governing permissions and limitations under the License.
 */
 
 import { html } from '@spectrum-web-components/base';
-import { elementUpdated, expect, nextFrame, oneEvent } from '@open-wc/testing';
+import {
+    aTimeout,
+    elementUpdated,
+    expect,
+    nextFrame,
+    oneEvent,
+} from '@open-wc/testing';
 import polyfillCheck from '@formatjs/intl-numberformat/should-polyfill.js';
 
 import {
@@ -338,6 +344,28 @@ describe('NumberField', () => {
                 changeSpy((event.target as NumberField)?.value);
             });
         });
+        it('via scroll', async () => {
+            el.focus();
+            await elementUpdated(el);
+            expect(el.focused).to.be.true;
+            el.dispatchEvent(new WheelEvent('wheel', { deltaY: 1 }));
+            await elementUpdated(el);
+            expect(el.formattedValue).to.equal('51');
+            expect(el.valueAsString).to.equal('51');
+            expect(el.value).to.equal(51);
+            expect(inputSpy.callCount).to.equal(1);
+            expect(changeSpy.callCount).to.equal(0);
+            el.dispatchEvent(new WheelEvent('wheel', { deltaY: 100 }));
+            await elementUpdated(el);
+            expect(el.formattedValue).to.equal('52');
+            expect(el.valueAsString).to.equal('52');
+            expect(el.value).to.equal(52);
+            expect(inputSpy.callCount).to.equal(2);
+            expect(changeSpy.callCount).to.equal(0);
+            await aTimeout(110);
+            expect(inputSpy.callCount).to.equal(2);
+            expect(changeSpy.callCount).to.equal(1);
+        });
         it('has a useful `value`', async () => {
             el.focus();
             await sendKeys({ type: '7' });