I have this text field type number, I want to set a minimum of 0 and a text field that does not accept negative values. I was able to do that, however, once I type on it, I would not be able to delete the 0, I would first need to go at front of the 0 then type in a number, and only then would the 0 be deleted. What can I do to fix or are there more suitable ways to do this?
Codesandbox: https://codesandbox.io/s/textfield-7sfdph?file=/demo.js:127-882
Codes:
export default function BasicTextFields() {
const [fee, setFee] = useState(0);
const amount = parseInt(1000);
const total = Number(amount) + Number(fee);
const handleSubmit = async (e) => {
e.preventDefault();
console.log(" submit");
};
return (
<form onSubmit={{ handleSubmit }}>
<TextField
label="Fee"
type="number"
value={fee}
onChange={(e) => {
if (e.target.value === "") {
setFee(0);
} else {
setFee(parseInt(e.target.value));
}
}}
InputProps={{
inputProps: {
min: 0
}
}}
/>
<button type="submit">Submit</button>
<br />
Total: {total}
</form>
);
}
Your onChange function is setting the value to 0 whenever the value is an empty string. When you delete something you are effectively changing the value, so the onChange function will be called.
Personally I would just call setFee with whatever value they typed because the type=number will already prevent users from typing anything that is not a number and will allow them to clear the field.
You can handle the case for when the value is empty with validation or on the onSubmit function. This is probably a better user experience.
You can check if number is negative if yes then set value to 0
const total = Number(amount) + (fee ? Number(fee) : 0);
// code
if (Number(e.target.value) < 0) {
setFee(0);
} else {
setFee(parseInt(e.target.value));
}then on submit check if value is not undefined