From d558e00449a5a994c817045896ac52d5c1b4d3d7 Mon Sep 17 00:00:00 2001
From: Zak Lee <zak.lee@shopify.com>
Date: Thu, 20 Jul 2023 02:02:30 +0000
Subject: [PATCH 1/3] Added logic to capture ArrowUp and ArrowDown for
 'integer' type TextFields

---
 .../src/components/TextField/TextField.tsx    | 10 +++++
 .../TextField/tests/TextField.test.tsx        | 45 +++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
index 9270ccbd2a4..2c00b4a1f44 100644
--- a/polaris-react/src/components/TextField/TextField.tsx
+++ b/polaris-react/src/components/TextField/TextField.tsx
@@ -682,6 +682,16 @@ export function TextField({
     }
 
     const {key, which} = event;
+
+    if (type === 'integer' && key === 'ArrowUp') {
+      handleNumberChange(1);
+      event.preventDefault();
+    }
+    if (type === 'integer' && key === 'ArrowDown') {
+      handleNumberChange(-1);
+      event.preventDefault();
+    }
+
     if ((which === Key.Home || key === 'Home') && min !== undefined) {
       if (onSpinnerChange != null) {
         onSpinnerChange(String(min), id);
diff --git a/polaris-react/src/components/TextField/tests/TextField.test.tsx b/polaris-react/src/components/TextField/tests/TextField.test.tsx
index a6e8757d15d..e75b1393f35 100644
--- a/polaris-react/src/components/TextField/tests/TextField.test.tsx
+++ b/polaris-react/src/components/TextField/tests/TextField.test.tsx
@@ -1743,6 +1743,51 @@ 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 textField = mountWithApp(
+            <TextField
+              id="MyTextField"
+              label="TextField"
+              type="integer"
+              value="10"
+              step={1}
+              onChange={spy}
+              autoComplete="off"
+            />,
+          );
+          textField.find('input')!.trigger('onKeyDown', {
+            key: 'ArrowDown',
+            which: Key.DownArrow,
+            preventDefault: noop,
+          });
+          expect(spy).toHaveBeenCalledWith('9', 'MyTextField');
+        });
+
+        it('increments by 1 multiple of step when type is integer and ArrowUp is pressed', () => {
+          const spy = jest.fn();
+          const textField = mountWithApp(
+            <TextField
+              id="MyTextField"
+              label="TextField"
+              type="integer"
+              value="10"
+              step={1}
+              largeStep={4}
+              onChange={spy}
+              autoComplete="off"
+            />,
+          );
+          textField.find('input')!.trigger('onKeyDown', {
+            key: 'ArrowUp',
+            which: Key.UpArrow,
+            preventDefault: noop,
+          });
+          expect(spy).toHaveBeenCalledWith('11', 'MyTextField');
+        });
+      });
     });
   });
 

From d9052b4606deb597e4b0b533d768c0bf84889043 Mon Sep 17 00:00:00 2001
From: Zak Lee <zak.lee@shopify.com>
Date: Thu, 20 Jul 2023 17:21:02 +0000
Subject: [PATCH 2/3] Adding changeset

---
 .changeset/pretty-boats-pretend.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/pretty-boats-pretend.md

diff --git a/.changeset/pretty-boats-pretend.md b/.changeset/pretty-boats-pretend.md
new file mode 100644
index 00000000000..af66ee3c25d
--- /dev/null
+++ b/.changeset/pretty-boats-pretend.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updating TextField to support ArrowUp and ArrowDown keypresses for "integer" type

From bbcf181eee76b57520ba842890d502ff78bd78ab Mon Sep 17 00:00:00 2001
From: Zak Lee <zak.lee@shopify.com>
Date: Thu, 20 Jul 2023 20:36:56 +0000
Subject: [PATCH 3/3] expanded on test cases to cover cases where step is
 greater than 1. Added checks for the event.which value.

---
 .../src/components/TextField/TextField.tsx    |  7 ++++--
 .../TextField/tests/TextField.test.tsx        | 22 ++++++++++++++-----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
index 2c00b4a1f44..e5f5e77a6ad 100644
--- a/polaris-react/src/components/TextField/TextField.tsx
+++ b/polaris-react/src/components/TextField/TextField.tsx
@@ -683,11 +683,14 @@ export function TextField({
 
     const {key, which} = event;
 
-    if (type === 'integer' && key === 'ArrowUp') {
+    if (type === 'integer' && (key === 'ArrowUp' || which === Key.UpArrow)) {
       handleNumberChange(1);
       event.preventDefault();
     }
-    if (type === 'integer' && key === 'ArrowDown') {
+    if (
+      type === 'integer' &&
+      (key === 'ArrowDown' || which === Key.DownArrow)
+    ) {
       handleNumberChange(-1);
       event.preventDefault();
     }
diff --git a/polaris-react/src/components/TextField/tests/TextField.test.tsx b/polaris-react/src/components/TextField/tests/TextField.test.tsx
index e75b1393f35..6251ea884a8 100644
--- a/polaris-react/src/components/TextField/tests/TextField.test.tsx
+++ b/polaris-react/src/components/TextField/tests/TextField.test.tsx
@@ -1747,13 +1747,15 @@ describe('<TextField />', () => {
       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="10"
-              step={1}
+              value={initialValue.toString()}
+              step={step}
               onChange={spy}
               autoComplete="off"
             />,
@@ -1763,18 +1765,23 @@ describe('<TextField />', () => {
             which: Key.DownArrow,
             preventDefault: noop,
           });
-          expect(spy).toHaveBeenCalledWith('9', 'MyTextField');
+          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="10"
-              step={1}
+              value={initialValue.toString()}
+              step={step}
               largeStep={4}
               onChange={spy}
               autoComplete="off"
@@ -1785,7 +1792,10 @@ describe('<TextField />', () => {
             which: Key.UpArrow,
             preventDefault: noop,
           });
-          expect(spy).toHaveBeenCalledWith('11', 'MyTextField');
+          expect(spy).toHaveBeenCalledWith(
+            (initialValue + step).toString(),
+            'MyTextField',
+          );
         });
       });
     });