TextField of type number increase/decrease can be never blurred

[JulienHe]

Issue summary

The Text Field component can have different type, and one of them is number. The input is changing to have arrows on the side to make it possible to increase or decrease the value. When you are using the arrows, you can make the input to never be blurred as you can see in this video.

Expected behavior

When I'm clicking outside of the input, the input should be blurred.

Actual behavior

The input is never blurred if you don't select the input itself. This make it hard to attach any callback to it apart of onChange.

Steps to reproduce the problem

• Visit https://polaris.shopify.com/components/text-field and select the type number.
• Use the arrow and click somewhere outside the input
• The input will not be blurred

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: 10
• Browser: Chrome
• Device: Mac
• Operating System: macOS