fix(number-field): select full value when using Tab to enter a field …

…with a unit (#4340)
adobe · May 24, 2024 · a9d5cef · a9d5cef
1 parent a1504b1
commit a9d5cef
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 2 deletions.
diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
@@ -430,6 +430,17 @@ export class NumberField extends TextfieldBase {
         });
     }
 
+    private hasRecentlyReceivedPointerDown = false;
+
+    protected override handleInputElementPointerdown(): void {
+        this.hasRecentlyReceivedPointerDown = true;
+        this.updateComplete.then(() => {
+            requestAnimationFrame(() => {
+                this.hasRecentlyReceivedPointerDown = false;
+            });
+        });
+    }
+
     protected override handleInput(event: Event): void {
         if (this.isComposing) {
             event.stopPropagation();
@@ -759,5 +770,14 @@ export class NumberField extends TextfieldBase {
             }
             this.inputElement.inputMode = inputMode;
         }
+        if (
+            changes.has('focused') &&
+            this.focused &&
+            !this.hasRecentlyReceivedPointerDown &&
+            !!this.formatOptions.unit
+        ) {
+            // Normalize keyboard focus entry between unit and non-unit bearing Number Fields
+            this.setSelectionRange(0, this.displayValue.length);
+        }
     }
 }
diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts
@@ -15,7 +15,6 @@ import {
     aTimeout,
     elementUpdated,
     expect,
-    fixture,
     nextFrame,
     oneEvent,
 } from '@open-wc/testing';
@@ -47,7 +46,11 @@ import { spy } from 'sinon';
 import { clickBySelector, getElFrom } from './helpers.js';
 import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';
 import { sendMouse } from '../../../test/plugins/browser.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import {
+    fixture,
+    testForLitDevWarnings,
+} from '../../../test/testing-helpers.js';
+import { isMac } from '@spectrum-web-components/shared/src/platform.js';
 
 describe('NumberField', () => {
     before(async () => {
@@ -874,6 +877,87 @@ describe('NumberField', () => {
             expect(el.valueAsString).to.equal('17');
             expect(el.value).to.equal(17);
         });
+        it('does not select all on click based `focus`', async function () {
+            this.retries(0);
+            const modifier = isMac() ? 'Meta' : 'Control';
+            const el = await getElFrom(units({ value: 17 }));
+            expect(el.value).to.equal(17);
+            const rect = el.focusElement.getBoundingClientRect();
+            await sendMouse({
+                steps: [
+                    {
+                        type: 'click',
+                        position: [
+                            rect.left + rect.width / 8,
+                            rect.top + rect.height / 2,
+                        ],
+                    },
+                ],
+            });
+            await nextFrame();
+            await nextFrame();
+            await nextFrame();
+            await nextFrame();
+            await elementUpdated(el);
+            expect(el.focused).to.be.true;
+            await sendKeys({
+                press: `${modifier}+KeyC`,
+            });
+            await nextFrame();
+            await nextFrame();
+            await elementUpdated(el);
+            await sendKeys({
+                press: 'ArrowRight',
+            });
+            await nextFrame();
+            await nextFrame();
+            await elementUpdated(el);
+            await sendKeys({
+                press: `${modifier}+KeyV`,
+            });
+            await nextFrame();
+            await nextFrame();
+            await elementUpdated(el);
+            expect(el.value, 'copy/paste changed the value').to.equal(17);
+        });
+        it('selects all on `Tab` based `focus`', async function () {
+            this.retries(0);
+            const modifier = isMac() ? 'Meta' : 'Control';
+            const el = await getElFrom(units({ value: 17 }));
+            const input = document.createElement('input');
+            el.insertAdjacentElement('beforebegin', input);
+            input.focus();
+            await sendKeys({
+                press: 'Tab',
+            });
+            await nextFrame();
+            await nextFrame();
+            await nextFrame();
+            await nextFrame();
+            await elementUpdated(el);
+            expect(el.focused).to.be.true;
+            await sendKeys({
+                press: `${modifier}+KeyC`,
+            });
+            await nextFrame();
+            await nextFrame();
+            await elementUpdated(el);
+            await sendKeys({
+                press: 'ArrowRight',
+            });
+            await nextFrame();
+            await nextFrame();
+            await elementUpdated(el);
+            await sendKeys({
+                press: `${modifier}+KeyV`,
+            });
+            await nextFrame();
+            await nextFrame();
+            await elementUpdated(el);
+            expect(el.value, 'copy/paste did not change the value').to.equal(
+                1717
+            );
+        });
         it('manages units not supported by the browser', async () => {
             const el = await getElFrom(pixels({ value: 17 }));
             expect(el.formattedValue).to.equal('17px');

diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
@@ -270,6 +270,8 @@ export class TextfieldBase extends ManageHelpText(
         this.focused = !this.readonly && false;
     }
 
+    protected handleInputElementPointerdown(): void {}
+
     protected renderStateIcons(): TemplateResult | typeof nothing {
         if (this.invalid) {
             return html`
@@ -355,6 +357,7 @@ export class TextfieldBase extends ManageHelpText(
                 .value=${live(this.displayValue)}
                 @change=${this.handleChange}
                 @input=${this.handleInput}
+                @pointerdown=${this.handleInputElementPointerdown}
                 @focus=${this.onFocus}
                 @blur=${this.onBlur}
                 ?disabled=${this.disabled}