Feature/number field

[mlaursen]

Description

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

[codecov-io]

Codecov Report

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

@@            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.