Restrict double minus in mui number textfiled - reactjs

Question

Currently, Number type inputs accepting double minus (i.e: --1). But I want only one - sign. If user press another minus then it should preventDefault().
Found a solution here. But it has some edge cases like, if user input '-123' and then go back and remove the '-' then user can't give the '-' again.

Answer 1

Since such values (-786-6, --712, ...) are allowed in TextField of type="number"
What I did is changing the textField proprety type from number to text, yes we'll accept strings but the user will be forced to enter a valid number.
Let's create a useState hook for the TextField input :
const [entredValue,setEntredValue] = useState('');
Then each time we verify if the entred input is a valid number before updating entredValue. this is a function made for that :
function restrict(test) {
if (test == "") return true;
if (test.length == 1) {
if (isNaN(test[0]) && test[0] !== "-") return false;
}
var found = 0;
for (let i = 0; i < test.length; i++) {
if (test[i] === ".") found++;
}
if (found > 1 || test == "-.") return false;
if (
test.length > 1 &&
isNaN(test[test.length - 1]) &&
test[test.length - 1] !== "."
)
return false;
let result = test.substr(0, test.length - 1);
if (test.length > 2 && isNaN(result)) return false;
return true;
}
Then update the state value this way :
<TextField
onChange={(event) => {
if (restrict(event.target.value)) {
setEntredValue(event.target.value);
}}}
/>
finally when you have to use entredValue:
parseFloat(entredValue); // always a valid number