[TextField] Improve/Fix TextField's onKeyDown capture logic for arrow keys

.changeset/pretty-boats-pretend.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updating TextField to support ArrowUp and ArrowDown keypresses for "integer" type

polaris-react/src/components/TextField/TextField.tsx

@@ -682,6 +682,19 @@ export function TextField({
     }
 
     const {key, which} = event;
+
+    if (type === 'integer' && (key === 'ArrowUp' || which === Key.UpArrow)) {
+      handleNumberChange(1);
+      event.preventDefault();
+    }
+    if (
+      type === 'integer' &&
+      (key === 'ArrowDown' || which === Key.DownArrow)
+    ) {
+      handleNumberChange(-1);
+      event.preventDefault();
+    }
+
     if ((which === Key.Home || key === 'Home') && min !== undefined) {
       if (onSpinnerChange != null) {
         onSpinnerChange(String(min), id);

polaris-react/src/components/TextField/tests/TextField.test.tsx

@@ -1743,6 +1743,61 @@ describe('<TextField />', () => {
         jest.runOnlyPendingTimers();
         expect(spy).not.toHaveBeenCalled();
       });
+
+      describe('keydown events', () => {
+        it('decrements by 1 multiple of step when type is integer and ArrowDown is pressed', () => {
+          const spy = jest.fn();
+          const initialValue = 10;
+          const step = 1;
+          const textField = mountWithApp(
+            <TextField
+              id="MyTextField"
+              label="TextField"
+              type="integer"
+              value={initialValue.toString()}
+              step={step}
+              onChange={spy}
+              autoComplete="off"
+            />,
+          );
+          textField.find('input')!.trigger('onKeyDown', {
+            key: 'ArrowDown',
+            which: Key.DownArrow,
+            preventDefault: noop,
+          });
+          expect(spy).toHaveBeenCalledWith(
+            (initialValue - step).toString(),
+            'MyTextField',
+          );
+        });
+
+        it('increments by 1 multiple of step when type is integer and ArrowUp is pressed', () => {
+          const spy = jest.fn();
+          const initialValue = 10;
+          const step = 9;
+          const textField = mountWithApp(
+            <TextField
+              id="MyTextField"
+              label="TextField"
+              type="integer"
+              value={initialValue.toString()}
+              step={step}
+              largeStep={4}
+              onChange={spy}
+              autoComplete="off"
+            />,
+          );
+          textField.find('input')!.trigger('onKeyDown', {
+            key: 'ArrowUp',
+            which: Key.UpArrow,
+            preventDefault: noop,
+          });
+          expect(spy).toHaveBeenCalledWith(
+            (initialValue + step).toString(),
+            'MyTextField',
+          );
+        });
+      });
     });
   });