How can I avoid showing temporary values in <input>? - html

Question

I created an input that only accepts multiples of 15 and 27. The code works but clicking the up/down arrows shows the not accepted values for a millisecond before the logic changes it to the accepted value.
Example: The current value is 15. After clicking the up arrow, the input first shows 16 and then changes it to 27.
How can I avoid this?
Here's my code:
Index.razor
<input type="number" #bind-value="#Foo">
Index.razor.cs
public partial class Index
{
private int _foo = 500;
private int Foo
{
get => _foo;
set
{
if (value != _foo)
{
if (value > _foo)
{
_foo = value;
while (_foo % 15 != 0 && _foo % 27 != 0)
{
_foo++;
}
}
else
{
_foo = value;
while (_foo % 15 != 0 && _foo % 27 != 0)
{
_foo--;
}
}
}
}
}
}
Many thanks!

Answer 1

Ok I've looked a bit more into this and it seems that the up and down arrows inside the input field are causing the problem. I've tested it with js and there's still some flickering that shows the next or previous number before applying the calculated number. While typing in your number or using the keyboard arrows-keys to increase or decrease them seems to work flawlessly.
So this might not be caused by Blazor itself as JS also struggles
The best bet would be to hide these arrows/spinners for the number input and only allow the user to enter a number and/or use the arrow keys on the keyboard to change them.
Here's an example of how it could work in JS (Should be applicable in Blazor as they also added input events):
Hide arrows/spinners of input field:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
Hint: Edit to your needs as it removes them on all number inputs.
Add your number input element
<input type="number" min="15" max="5000" id="specialNumberInput"/>
Catch the input's events to calculate your values
var currentValue = 500;
document.getElementById('specialNumberInput').onchange = function (event) {
let minValue = parseInt(event.srcElement.getAttribute('min'));
let maxValue = parseInt(event.srcElement.getAttribute('max'));
let value = parseInt(event.srcElement.value);
if(value > maxValue) {
currentValue = maxValue;
event.srcElement.value = currentValue;
return;
}
if(value < minValue) {
currentValue = minValue;
event.srcElement.value = currentValue;
return;
}
if (value > currentValue)
{
while (value % 15 != 0 && value % 27 != 0)
{
value++;
}
}
else
{
while (value % 15 != 0 && value % 27 != 0)
{
value--;
}
}
currentValue = value;
event.srcElement.value = currentValue;
}
As mentioned above you could attach your Blazor code to the "onchange" event of your input and run your logic to calculate next or previous values. As js also flickers, removing the selection arrows/spinners might then also work flawlessly with Blazor.