fix(number-field): add support for scrubbing (#1535)

bengfarrell · Westbrook Johnson · commit 3034755f9a27 · 2024-05-22T04:36:57.000-07:00
* feat(number-field): added features required for internal Adobe project
- scrubbable (drag left/right for increment decrementing)
- allow per pixel amount for scrubbing (defaults to using existing step)
- shift modifier step multiplier for fast keyboard increment/decrement

* feat(number-field): add shift modifier to multiply key input

* feat(number-field): put stepper buttons in shift modifier path

* fix(number-field): fix issue with PR where there are runtime errors when buttons are hidden

* fix(number-field): add property to indicate that the user is scrubbing

* fix(number-field): delay scrub input by 250ms in case user clicked/dragged a bit meaning to focus

* fix(number-field): issue with scrubbing off component lights up focus ring without having focus

* fix(number-field): issues with intermittent inner focus-visible and misfiring on negative distance
diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
@@ -106,6 +106,9 @@ export class NumberField extends TextfieldBase {
 
     _forcedUnit = '';
 
+    @property({ type: Boolean, reflect: true })
+    public scrubbing = false;
+
     /**
      * An `&lt;sp-number-field&gt;` element will process its numeric value with
      * `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`
@@ -149,6 +152,9 @@ export class NumberField extends TextfieldBase {
     @property({ type: Number, reflect: true, attribute: 'step-modifier' })
     public stepModifier = 10;
 
+    @property({ type: Number })
+    public stepperpixel?: number;
+
     @property({ type: Number })
     public override set value(rawValue: number) {
         const value = this.validateInput(rawValue);
@@ -242,13 +248,29 @@ export class NumberField extends TextfieldBase {
     private change!: (event: PointerEvent) => void;
     private safty!: number;
     private languageResolver = new LanguageResolutionController(this);
+    private pointerDragXLocation?: number;
+    private pointerDownTime?: number;
+    private scrubDistance = 0;
 
     private handlePointerdown(event: PointerEvent): void {
         if (event.button !== 0) {
             event.preventDefault();
             return;
         }
         this.managedInput = true;
+
+        if (!this.focused) {
+            this.setPointerCapture(event.pointerId);
+            this.scrub(event);
+        }
+    }
+
+    private handleButtonPointerdown(event: PointerEvent): void {
+        if (event.button !== 0) {
+            event.preventDefault();
+            return;
+        }
+        this.managedInput = true;
         this.buttons.setPointerCapture(event.pointerId);
         const stepUpRect = this.buttons.children[0].getBoundingClientRect();
         const stepDownRect = this.buttons.children[1].getBoundingClientRect();
@@ -287,11 +309,11 @@ export class NumberField extends TextfieldBase {
         this.change(event);
     }
 
-    private handlePointermove(event: PointerEvent): void {
+    private handleButtonPointermove(event: PointerEvent): void {
         this.findChange(event);
     }
 
-    private handlePointerup(event: PointerEvent): void {
+    private handleButtonPointerup(event: PointerEvent): void {
         this.buttons.releasePointerCapture(event.pointerId);
         cancelAnimationFrame(this.nextChange);
         clearTimeout(this.safty);
@@ -340,6 +362,81 @@ export class NumberField extends TextfieldBase {
         this.stepBy(-1 * factor);
     }
 
+    private handlePointermove(event: PointerEvent): void {
+        this.scrub(event);
+    }
+
+    private handlePointerup(event: PointerEvent): void {
+        this.releasePointerCapture(event.pointerId);
+        this.scrub(event);
+        cancelAnimationFrame(this.nextChange);
+        clearTimeout(this.safty);
+        this.managedInput = false;
+        this.setValue();
+    }
+
+    private scrub(event: PointerEvent): void {
+        switch (event.type) {
+            case 'pointerdown':
+                this.scrubbing = true;
+                this.pointerDragXLocation = event.clientX;
+                this.pointerDownTime = Date.now();
+                this.inputElement.disabled = true;
+                this.addEventListener('pointermove', this.handlePointermove);
+                this.addEventListener('pointerup', this.handlePointerup);
+                this.addEventListener('pointercancel', this.handlePointerup);
+                event.preventDefault();
+                break;
+
+            case 'pointermove':
+                if (
+                    this.pointerDragXLocation &&
+                    this.pointerDownTime &&
+                    Date.now() - this.pointerDownTime > 250
+                ) {
+                    const amtPerPixel = this.stepperpixel || this._step;
+                    const dist: number =
+                        event.clientX - this.pointerDragXLocation;
+                    const delta =
+                        Math.round(dist * amtPerPixel) *
+                        (event.shiftKey ? this.stepModifier : 1);
+                    this.scrubDistance += Math.abs(dist);
+                    this.pointerDragXLocation = event.clientX;
+                    this.stepBy(delta);
+                    event.preventDefault();
+                }
+                break;
+
+            default:
+                this.pointerDragXLocation = undefined;
+                this.scrubbing = false;
+                this.inputElement.disabled = false;
+                this.removeEventListener('pointermove', this.handlePointermove);
+                this.removeEventListener('pointerup', this.handlePointerup);
+                this.removeEventListener('pointercancel', this.handlePointerup);
+
+                // if user has scrubbed, disallow focus of field
+                const bounds = this.getBoundingClientRect();
+                if (
+                    this.scrubDistance > 0 &&
+                    this.pointerDownTime &&
+                    Date.now() - this.pointerDownTime > 250
+                ) {
+                    event.preventDefault();
+                } else if (
+                    event.clientX >= bounds.x &&
+                    event.clientX <= bounds.x + bounds.width &&
+                    event.clientY >= bounds.y &&
+                    event.clientY <= bounds.y + bounds.height
+                ) {
+                    this.focus();
+                }
+                this.scrubDistance = 0;
+                this.pointerDownTime = undefined;
+                break;
+        }
+    }
+
     private handleKeydown(event: KeyboardEvent): void {
         if (this.isComposing) return;
         switch (event.code) {
@@ -375,6 +472,9 @@ export class NumberField extends TextfieldBase {
     }
 
     protected override onFocus(): void {
+        if (this.pointerDragXLocation) {
+            return;
+        }
         super.onFocus();
         this._trackingValue = this.inputValue;
         this.keyboardFocused = !this.readonly && true;
@@ -639,7 +739,10 @@ export class NumberField extends TextfieldBase {
                           @focusin=${this.handleFocusin}
                           @focusout=${this.handleFocusout}
                           ${streamingListener({
-                              start: ['pointerdown', this.handlePointerdown],
+                              start: [
+                                  'pointerdown',
+                                  this.handleButtonPointerdown,
+                              ],
                               streamInside: [
                                   [
                                       'pointermove',
@@ -648,15 +751,15 @@ export class NumberField extends TextfieldBase {
                                       'pointerover',
                                       'pointerout',
                                   ],
-                                  this.handlePointermove,
+                                  this.handleButtonPointermove,
                               ],
                               end: [
                                   [
                                       'pointerup',
                                       'pointercancel',
                                       'pointerleave',
                                   ],
-                                  this.handlePointerup,
+                                  this.handleButtonPointerup,
                               ],
                           })}
                       >
@@ -729,6 +832,7 @@ export class NumberField extends TextfieldBase {
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('compositionstart', this.handleCompositionStart);
         this.addEventListener('compositionend', this.handleCompositionEnd);
+        this.addEventListener('pointerdown', this.handlePointerdown);
     }
 
     protected override updated(changes: PropertyValues<this>): void {
diff --git a/packages/number-field/src/number-field.css b/packages/number-field/src/number-field.css
@@ -58,6 +58,99 @@ governing permissions and limitations under the License.
     visibility: hidden;
 }
 
+:host(:not([focused], [disabled])) {
+    cursor: ew-resize;
+}
+
+:host(:not([focused], [disabled])) input {
+    cursor: ew-resize;
+}
+
+:host([hide-stepper]:not([quiet])) .input {
+    border-radius: var(
+        --spectrum-alias-border-radius-regular,
+        var(--spectrum-global-dimension-size-50)
+    );
+}
+
+:host([dir='ltr'][invalid]:not([hide-stepper])) .icon {
+    /* [dir=ltr] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */
+    right: calc(
+        var(--spectrum-stepper-button-width) +
+            var(--spectrum-textfield-error-icon-margin-left)
+    );
+}
+
+:host([dir='rtl'][invalid]:not([hide-stepper])) .icon {
+    /* [dir=rtl] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */
+    left: calc(
+        var(--spectrum-stepper-button-width) +
+            var(--spectrum-textfield-error-icon-margin-left)
+    );
+}
+
+:host([dir='ltr'][valid]:not([hide-stepper])) .icon {
+    /* [dir=ltr] .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon */
+    right: calc(
+        var(--spectrum-stepper-button-width) +
+            var(--spectrum-textfield-error-icon-margin-left)
+    );
+}
+
+:host([dir='rtl'][valid]:not([hide-stepper])) .icon {
+    /* [dir=rtl] .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon */
+    left: calc(
+        var(--spectrum-stepper-button-width) +
+            var(--spectrum-textfield-error-icon-margin-left)
+    );
+}
+
+:host([dir='ltr'][quiet][invalid]:not([hide-stepper])) .icon {
+    /* [dir=ltr] .spectrum-Textfield--quiet.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */
+    right: var(--spectrum-stepper-button-width);
+}
+
+:host([dir='rtl'][quiet][invalid]:not([hide-stepper])) .icon {
+    /* [dir=rtl] .spectrum-Textfield--quiet.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */
+    left: var(--spectrum-stepper-button-width);
+}
+
+:host([dir='ltr'][quiet][valid]:not([hide-stepper])) .icon {
+    /* [dir=ltr] .spectrum-Textfield--quiet.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon */
+    right: var(--spectrum-stepper-button-width);
+}
+
+:host([dir='rtl'][quiet][valid]:not([hide-stepper])) .icon {
+    /* [dir=rtl] .spectrum-Textfield--quiet.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon */
+    left: var(--spectrum-stepper-button-width);
+}
+
+:host([dir='ltr']:not([hide-stepper])) .icon-workflow {
+    /* [dir=ltr] .spectrum-Textfield-icon */
+    left: calc(
+        var(--spectrum-stepper-button-width) +
+            var(--spectrum-textfield-error-icon-margin-left)
+    );
+}
+
+:host([dir='rtl']:not([hide-stepper])) .icon-workflow {
+    /* [dir=rtl] .spectrum-Textfield-icon */
+    right: calc(
+        var(--spectrum-stepper-button-width) +
+            var(--spectrum-textfield-error-icon-margin-left)
+    );
+}
+
+:host([dir='ltr'][quiet]:not([hide-stepper])) .icon-workflow {
+    /* [dir=ltr] .spectrum-Textfield--quiet .spectrum-Textfield-icon */
+    left: var(--spectrum-stepper-button-width);
+}
+
+:host([dir='rtl'][quiet]:not([hide-stepper])) .icon-workflow {
+    /* [dir=rtl] .spectrum-Textfield--quiet .spectrum-Textfield-icon */
+    right: var(--spectrum-stepper-button-width);
+}
+
 :host([readonly]:not([disabled], [invalid], [focused], [keyboard-focused]))
     #textfield:hover
     .input {
diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts
@@ -557,6 +557,12 @@ describe('NumberField', () => {
                 clientX: stepUpRect.x + 1,
                 clientY: stepUpRect.y + 1,
             };
+            el.setPointerCapture = () => {
+                return;
+            };
+            el.releasePointerCapture = () => {
+                return;
+            };
             (
                 el as unknown as {
                     buttons: HTMLDivElement;
@@ -656,7 +662,7 @@ describe('NumberField', () => {
             expect(inputSpy.callCount).to.equal(5);
             expect(changeSpy.callCount).to.equal(1);
         });
-        it('no change in committed value - using buttons', async () => {
+        it('no change in committed value - using buttons', async function () {
             const buttonUp = el.shadowRoot.querySelector(
                 '.step-up'
             ) as HTMLElement;
@@ -673,6 +679,7 @@ describe('NumberField', () => {
                 buttonDownRect.x + buttonDownRect.width / 2,
                 buttonDownRect.y + buttonDownRect.height / 2,
             ];
+            const initialVaue = el.value;
             sendMouse({
                 steps: [
                     {
@@ -686,27 +693,32 @@ describe('NumberField', () => {
             });
             await oneEvent(el, 'input');
             expect(el.value).to.equal(51);
-            expect(inputSpy.callCount).to.equal(1);
+            expect(inputSpy.callCount).to.equal(
+                Math.abs(el.value - initialVaue)
+            );
             expect(changeSpy.callCount).to.equal(0);
             await oneEvent(el, 'input');
             expect(el.value).to.equal(52);
-            expect(inputSpy.callCount).to.equal(2);
+            expect(inputSpy.callCount).to.equal(
+                Math.abs(el.value - initialVaue)
+            );
             expect(changeSpy.callCount).to.equal(0);
-            sendMouse({
+            const inputs = inputSpy.callCount;
+            const intermediateValue = el.value;
+            await sendMouse({
                 steps: [
                     {
                         type: 'move',
                         position: buttonDownPosition,
                     },
                 ],
             });
-            let framesToWait = FRAMES_PER_CHANGE * 2;
-            while (framesToWait) {
-                // input is only processed onces per FRAMES_PER_CHANGE number of frames
-                framesToWait -= 1;
-                await nextFrame();
+            while (el.value > 50) {
+                await oneEvent(el, 'input');
             }
-            expect(inputSpy.callCount).to.equal(4);
+            expect(inputSpy.callCount).to.equal(
+                inputs + Math.abs(el.value - intermediateValue)
+            );
             expect(changeSpy.callCount).to.equal(0);
             await sendMouse({
                 steps: [
@@ -715,14 +727,17 @@ describe('NumberField', () => {
                     },
                 ],
             });
-            expect(inputSpy.callCount).to.equal(4);
+            expect(el.value).to.equal(50);
+            expect(inputSpy.callCount).to.equal(
+                inputs + Math.abs(el.value - intermediateValue)
+            );
             expect(
                 changeSpy.callCount,
                 'value does not change from initial value so no "change" event is dispatched'
             ).to.equal(0);
         });
     });
-    it('accepts pointer interactions with the stepper UI', async () => {
+    it('accepts pointer interactions with the stepper UI', async function () {
         const inputSpy = spy();
         const el = await getElFrom(Default({ value: 50 }));
         el.addEventListener('input', () => inputSpy());
