[TextField] allow type "integer" to handle arrowUp and arrowDown keypresses

[zaquille-oneil]

Issue summary

TextField components with type="integer" do not properly increment the value on key press down of ArrowUp and ArrowDown

Expected behavior

When focused on a TextField input with prop type="integer" I expect that pressing up arrow or down arrow with the keyboard increments the value by 1. (TextField input with prop type="number" already does this out of the box)

Actual behavior

Default "text" behavior. Because HTML5 input elements don't accept "integer" as a type, the input element we create within TextField.tsx defaults to type="text". Default behavior for "text" input elements are to move the cursor to the front or back of the input's value.

Steps to reproduce the problem

1. Go to TextField documentation
2. Edit in sandbox
3. pass "number" as type to TextField
4. verify that arrowUp and arrowDown key presses increment the value by 1 multiple of the step prop (or 1 by default if step is not defined)
5. change the type value to "integer"
6. verify that arrowUp and arrowDown key presses do not increment the value

Reduced test case

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 11.6
• Browser: Chrome
• Device: MacBook Pro 2021
• Operating System: Ventura 13.4.1

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here: