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
diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
index 9270ccbd2a4..e5f5e77a6ad 100644
--- a/polaris-react/src/components/TextField/TextField.tsx
+++ b/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);
diff --git a/polaris-react/src/components/TextField/tests/TextField.test.tsx b/polaris-react/src/components/TextField/tests/TextField.test.tsx
index a6e8757d15d..6251ea884a8 100644
--- a/polaris-react/src/components/TextField/tests/TextField.test.tsx
+++ b/polaris-react/src/components/TextField/tests/TextField.test.tsx
@@ -1743,6 +1743,61 @@ describe('', () => {
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.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.find('input')!.trigger('onKeyDown', {
+ key: 'ArrowUp',
+ which: Key.UpArrow,
+ preventDefault: noop,
+ });
+ expect(spy).toHaveBeenCalledWith(
+ (initialValue + step).toString(),
+ 'MyTextField',
+ );
+ });
+ });
});
});