Currently, when the input value is 1, pressing the arrow-down will show the value of 0.9 without alerting the user. Pressing the arrow-down (or the arrow-up) will then alert the user, without changing the value.
This is not the best user experience.
Ideal solution
When pressing the arrow-down or arrow-up returns a value outside the range between 1 and 100, the alert should appear immediately.
Then the user can correct the value by pressing the arrow key again.
On the other hand, for alerting too many decimal places, we should prevent the user from changing the value by pressing arrow keys.
Why difficult to implement
It's not straightforward to check the validity of input element values after programatically changing the values. The validityState does not change after React updates the state.
Plus, dealing with the decimal place error separately makes things more complicated.
A possible solution may be to trigger an onChange event programatically after changing the value. Or manually validate the new value after the change.
Problem
Currently, when the input value is 1, pressing the arrow-down will show the value of 0.9 without alerting the user. Pressing the arrow-down (or the arrow-up) will then alert the user, without changing the value.
This is not the best user experience.
Ideal solution
When pressing the arrow-down or arrow-up returns a value outside the range between 1 and 100, the alert should appear immediately.
Then the user can correct the value by pressing the arrow key again.
On the other hand, for alerting too many decimal places, we should prevent the user from changing the value by pressing arrow keys.
Why difficult to implement
It's not straightforward to check the validity of input element values after programatically changing the values. The
validityStatedoes not change after React updates the state.Plus, dealing with the decimal place error separately makes things more complicated.
A possible solution may be to trigger an onChange event programatically after changing the value. Or manually validate the new value after the change.