mantine icon indicating copy to clipboard operation
mantine copied to clipboard

NumberInput allows undesired empty strings

Open buchananwill opened this issue 1 year ago • 0 comments

Dependencies check up

  • [X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.13.3

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

  1. There is no option to disallow empty values for number inputs
  2. Attempting to set the field value (with a controlled input) using onBlur does not update the UI

As a result, if the user deletes all the content from a NumberInput via backspace and then also presses delete, the field can seemingly be left blank, even when this is not allowed and min/max values have been supplied.

This was my workaround:

          <Controller
            name={'cycleLengthInWeeks'}
            control={control}
            render={({ field }) => (
              <NumberInput
                clampBehavior={'strict'}
                label={'Cycle Length in Weeks'}
                min={1}
                max={52}
                value={field.value}
                onBlur={(blurAction) => {
                  blurAction.currentTarget.value = String(field.value);
                }}
                onChange={(value) =>
                  field.onChange(isNumber(value) && value > 0 ? value : 1)
                }
              />
            )}
          />

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

  • [X] I would be willing to implement a fix for this issue

buchananwill avatar Oct 19 '24 18:10 buchananwill