Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/number field #1014

merged 10 commits into from Nov 24, 2020

Feature/number field #1014

merged 10 commits into from Nov 24, 2020


Copy link

@mlaursen mlaursen commented Nov 24, 2020


This PR introduces a new hook for the @react-md/form package to work with <input type="number"> due to all the browser behavior weirdness. The new hook is named useNumberField and can be used with a TextField or TextFieldWithMessage component where the first value in the returned array is the current number value of the input while the second value is an object of props to pass to the TextField or TextFieldWithMessage components.

Some things to note:

  • the number value will be undefined ONLY if no defaultValue was provided to the hook
  • the number value can be updated only on blur instead of on change if needed
  • the value will be "fixed" on blur by default to ensure it is between the optional min and max values (configurable)
  • the value will be "fixed" to remove all leading 0s
  • same validation available as the useTextField hook with a few more options and a different "number-recommended" validateOnChange value

Simple Number Field Example

const [numberValue, fieldProps] = useNumberField({
  id: "field-id",
  disableMessage: true,

return (
  <TextField {...fieldProps} label="My Label" placeholder="My placeholder" />

Number Field with Validation

const [numberValue, fieldProps] = useNumberField({
  id: "field-id",

return (
  <TextFieldWithMessage {...fieldProps} label="My Label" placeholder="My placeholder" />

General "Fixes"

The field will show an error and maintain the floating label if the user types an invalid number that the browser doesn't prevent since the browser will prevent letters from being typed, but it allows some of these invalid strings:

  • --0
  • 3242-
  • 3-0
  • ++1
  • etc

Video example here

This was actually pretty difficult/annoying to fix since once the field goes into an "invalid" state, it doesn't report change events and reports the value as the empty string. This should be fixed going forward.

Closes #280

Copy link

Codecov Report

Merging #1014 (bd4842a) into main (ef1d764) will increase coverage by 0.12%.
The diff coverage is 98.13%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #1014      +/-   ##
+ Coverage   89.17%   89.29%   +0.12%     
  Files         257      259       +2     
  Lines        7225     7316      +91     
  Branches     1862     1887      +25     
+ Hits         6443     6533      +90     
+ Misses        700      699       -1     
- Partials       82       84       +2     
Impacted Files Coverage Δ
packages/form/src/FormMessageContainer.tsx 100.00% <ø> (ø)
...ckages/form/src/text-field/PasswordWithMessage.tsx 100.00% <ø> (ø)
...ckages/form/src/text-field/TextAreaWithMessage.tsx 100.00% <ø> (ø)
packages/form/src/text-field/TextField.tsx 100.00% <ø> (ø)
...kages/form/src/text-field/TextFieldWithMessage.tsx 100.00% <ø> (ø)
packages/form/src/text-field/getErrorIcon.ts 100.00% <ø> (ø)
packages/form/src/text-field/useTextField.ts 100.00% <ø> (ø)
packages/form/src/text-field/useNumberField.ts 97.53% <97.53%> (ø)
packages/form/src/text-field/getErrorMessage.ts 100.00% <100.00%> (ø)
packages/form/src/text-field/isErrored.ts 100.00% <100.00%> (ø)
... and 4 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ef1d764...bd4842a. Read the comment docs.

@mlaursen mlaursen merged commit d158b62 into main Nov 24, 2020
@mlaursen mlaursen deleted the feature/number-field branch November 24, 2020 23:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

Successfully merging this pull request may close these issues.

[TextField] - Better TextField number support
2 participants