NumberInput with precision has pattern that excludes negative values

🐛 Bug report

The NumberInput pattern created when using precision rejects negative values.

💥 Steps to reproduce

1. Create a number input

<NumberInput
      min={-12}
      max={12}
      precision={1}
  >
      <NumberInputField />
      <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
      </NumberInputStepper>
  </NumberInput>

1. Enter a value such as -1.2. Note: This issue doesn’t seem to occur for values like -10 - where precision is not needed.

🧐 Expected behavior

The value should be accepted by the pattern.

🧭 Possible Solution

Change the pattern from [0-9]*(.[0-9]+)? to -?[0-9]*(.[0-9]+)? when the min property is less than zero.

🌍 System information

Software	Version(s)
Chakra UI	“@chakra-ui/react”: “^1.0.3”
Browser	Any (Firefox / Chrome tested)
Operating System	N/A

📝 Additional information

Number field is highlighted red even though the input is valid

[stuisme]

If anyone else runs into this, here is a workaround

<NumberInput value={value} onChange={handleOnChange} precision={2} min={-9999.99} max={9999.99}>
  <NumberInputField pattern="(-)?[0-9]*(.[0-9]+)?" />
 </NumberInput>

[stuisme]

@segunadebayo This is not fixed in 1.7.2

<NumberInput value={value} onChange={handleOnChange} precision={2} min={-9999.99} max={9999.99}>
  <NumberInputField />
 </NumberInput>

then type in -123.45 in the input and try to submit via a form (i.e. with formik)

on submit, you receive an built in browser validation error “Please match the requested format” because the <input /> it generates comes with a pattern="[0-9]*(.[0-9]+)?"