Polaris-react: TextField readOnly prop ignored when type="number"

[matt-neill]

Issue summary

When the type="number" prop is present on the TextField component, the readOnly prop does not disable or remove the number steppers. The user can still click the up/down arrows to change the field's value.

Expected behaviour

Similar to how disabled fields are treated when type="number", remove the number steppers to prevent the value from being changed.

Actual behaviour

The user can click the up/down arrows (the number steppers) to change the field value, despite the readOnly prop being present.

Steps to reproduce the problem

1. Create a TextField component
2. Add the type="number" prop
3. Add the readOnly prop
4. Click the up/down arrows (the number steppers) and see the field's value change

Reduced test case

Check out this Codesandbox project

Specifications

• Are you using the React components? (Y/N): Yes
• Polaris version number: 3.9.0
• Browser: Chrome 72.0.3626.109
• Device: MacBook Pro
• Operating System: macOS Mojave (10.14)

[probot-shopify[bot]]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[chloerice]

Hi @matt-neill, removing the onChange prop on the readOnly TextField prevents the steppers from incrementing/decrementing, but they still aren't disabled as I'd expect them to be in a readOnly number component. Thanks for raising this!!

[cloneali]

Can I work on this one?

[chloerice]

@cloneali Absolutely! Go ahead and assign yourself to the issue so no one doubles up on fixing it, and ping me on the PR when you're ready for review 😃

[cloneali]

Cool. Can you assign me this issue? As I am not a member or collaborator in this project. Thanks.

[chloerice]

Ahh right looks like it's not possible to actually assign this to you, but it's clear from the comments that you're taking it on, so there shouldn't be anyone doubling up 👍