mantine
mantine copied to clipboard
NumberInput allows undesired empty strings
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
- There is no option to disallow empty values for number inputs
- 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