fix(number-field): prevent interactin with stepper buttons when disabled

adobe · Nov 15, 2021 · ae20343 · ae20343
1 parent b7a37ae
commit ae20343
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
@@ -249,7 +249,7 @@ export class NumberField extends TextfieldBase {
     }
 
     private stepBy(count: number): void {
-        if (this.readonly) {
+        if (this.disabled || this.readonly) {
             return;
         }
         const min = typeof this.min !== 'undefined' ? this.min : 0;

diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts
@@ -1083,6 +1083,46 @@ describe('NumberField', () => {
         expect(stepUp).to.be.null;
         expect(stepDown).to.be.null;
     });
+    describe('Disabled', () => {
+        let el: NumberField;
+        beforeEach(async () => {
+            el = await getElFrom(Default({ disabled: true, value: 1337 }));
+            expect(el.formattedValue).to.equal('1,337');
+            expect(el.valueAsString).to.equal('1337');
+            expect(el.value).to.equal(1337);
+            el.focus();
+            await elementUpdated(el);
+        });
+        afterEach(async () => {
+            await elementUpdated(el);
+            expect(el.formattedValue).to.equal('1,337');
+            expect(el.valueAsString).to.equal('1337');
+            expect(el.value).to.equal(1337);
+        });
+        it('presents as `disabled`', async () => {
+            await sendKeys({ type: '12345' });
+            await elementUpdated(el);
+            await sendKeys({ press: 'Enter' });
+        });
+        it('prevents increment via keyboard', async () => {
+            await sendKeys({ press: 'ArrowUp' });
+        });
+        it('prevents decrement via keyboard', async () => {
+            await sendKeys({ press: 'ArrowDown' });
+        });
+        it('prevents increment via scroll', async () => {
+            el.dispatchEvent(new WheelEvent('wheel', { deltaY: 1 }));
+        });
+        it('prevents decrement via scroll', async () => {
+            el.dispatchEvent(new WheelEvent('wheel', { deltaY: -1 }));
+        });
+        it('prevents increment via stepper button', async () => {
+            await clickBySelector(el, '.stepUp');
+        });
+        it('prevents decrement via stepper button', async () => {
+            await clickBySelector(el, '.stepDown');
+        });
+    });
     describe('Readonly', () => {
         let el: NumberField;
         beforeEach(async () => {