fix: number input

[segunadebayo]

Closes #4474 #4776 #4646

📝 Description

This PR fixes a number of issues in the number-input component and exposes a way to format, parse and validate characters typed into the number input.

It also introduces a new onInvalid callback that is invoked when the input's value exceeds the specified range.

⛳️ Current behavior (updates)

• Unable to provide custom parse and format functions making the number-input unusable in certain use-cases (even with the example demonstrated in docs)
• When increment or decrement buttons are disabled, the setInterval timer isn't cleared can cause weird race conditions.

💣 Is this a breaking change (Yes/No):

No

[changeset-bot]

🦋 Changeset detected

Latest commit: 4a2346b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@chakra-ui/number-input	Minor
@chakra-ui/react	Patch
@chakra-ui/test-utils	Patch
@chakra-ui/props-docs	Patch
@chakra-ui/docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

chakra-ui – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui/KquT362mmaHRDvBAVKgN1yW7iCNU
✅ Preview: https://chakra-ui-git-fix-use-number-input-chakra-ui.vercel.app

chakra-ui-storybook – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-storybook/8FwQKmpdmPGsGWmVMdWA2bd6gCKb
✅ Preview: https://chakra-ui-storybook-git-fix-use-number-input-chakra-ui.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4a2346b:

Sandbox	Source
create-react-app-ts	Configuration

[samhecquet-divido]

Hi, any update on this PR being merged? I'm encountering the same issue

[github-actions]

📦 A new release has been made for this pull request

To play around with this release, you can install @chakra-ui/react@0.0.0-pr-202202410034 in your project

Latest commit: 4a2346b

[llamadeus]

I don't think this PR fixes #4474, because internally the useNumberInput hook still uses an internal implementation of parse.

The problem occurs when the input field blurs. With validateAndClamp set to true, an input of 0,01 is parsed by the parse function to 1. When incrementing the number using the steppers, an input of 1,01 results in 101,01 (first 1,01 is parsed to 101 and then 0.01 is being added).

I'm using the NumberInput component as such:

export const NumberInput = forwardRef(function NumberInputComponent(
  props: NumberInputProps & Pick<NumberInputFieldProps, 'placeholder'>,
  ref: ForwardedRef<HTMLDivElement | null>,
) {
  const { placeholder, ...other } = props;
  const parse = (value: StringOrNumber) => String(value).replace(',', '.');
  const format = (value: StringOrNumber | undefined) => (
    typeof value != 'undefined'
      ? String(value).replace('.', ',')
      : ''
  );

  return (
    <ChakraNumberInput
      ref={ref}
      min={0}
      precision={0}
      {...other}
      onChange={(valueAsString, valueAsNumber) => {
        const fixed = parseFloat(valueAsString.replace(',', '.'));
        
        other.onChange?.(valueAsString, fixed);
      }}
      value={format(other.value)}
      pattern="[0-9]*(,[0-9]+)?"
      isValidCharacter={value => /^[0-9-,]$/.test(value)}
    >
      <NumberInputField placeholder={placeholder}/>
      <NumberInputStepper>
        <NumberIncrementStepper/>
        <NumberDecrementStepper/>
      </NumberInputStepper>
    </ChakraNumberInput>
  );
});

I'm using "@chakra-ui/react": "^2.2.1".

[dedekpo]

@llamadeus I solved the issue adding the 'parse' argument
My code:

<NumberInput
	defaultValue={0}
	precision={1}
	step={0.1}
	format={(value) =>
		String(value).replace(".", ",")
	}
	parse={(value) => value.replace(",", ".")}
>
...

[llamadeus]

@dedekpo Oh wow, that's an awesome solution. Thank you so much!