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', + ); + }); + }); }); });