In Blazor, how can I undo invalid user input, without changing the state of the component to trigger a re-render?
Here is a simple Blazor counter example (try it online):
<label>Count:</label>
<button @onclick=Increment>@count times!</button><br>
A: <input @oninput=OnChange value="@count"><br>
B: <input @bind-value=count @bind-value:event="oninput">
@code {
int count = 1;
void Increment() => count++;
void OnChange(ChangeEventArgs e)
{
var userValue = e.Value?.ToString();
if (int.TryParse(userValue, out var v))
{
count = v;
}
else
{
if (String.IsNullOrWhiteSpace(userValue))
{
count = 0;
}
// if count hasn't changed here,
// I want to re-render "A"
// this doesn't work
e.Value = count.ToString();
// this doesn't work either
StateHasChanged();
}
}
}
For input element A, I want to replicate the behavior of input element B, but without using the bind-xxx-style data binding attributes.
E.g., when I type 123x inside A, I want it to revert back to 123 automatically, as it happens with B.
I've tried StateHasChanged but it doesn't work, I suppose, because the count property doesn't actually change.
So, basically I need to re-render A to undo invalid user input, even thought the state hasn't changed. How can I do that without the bind-xxx magic?
Sure, bind-xxx is great, but there are cases when a non-standard behavior might be desired, built around a managed event handler like ChangeEvent.
Updated, to compare, here's how I could have done it in React (try it online):
function App() {
let [count, setCount] = useState(1);
const handleClick = () => setCount((count) => count + 1);
const handleChange = (e) => {
const userValue = e.target.value;
let newValue = userValue ? parseInt(userValue) : 0;
if (isNaN(newValue)) newValue = count;
// re-render even when count hasn't changed
setCount(newValue);
};
return (
<>
Count: <button onClick={handleClick}>{count}</button><br/>
A: <input value={count} onInput={handleChange}/><br/>
</>
);
}
Also, here's how I could have done it in Svelte, which I find conceptually very close to Blazor (try it online).
<script>
let count = 1;
const handleClick = () => count++;
const handleChange = e => {
const userValue = e.target.value;
let newValue = userValue? parseInt(userValue): 0;
if (isNaN(newValue)) newValue = count;
if (newValue === count)
e.target.value = count; // undo user input
else
count = newValue;
}
};
</script>
Count: <button on:click={handleClick}>{count}</button><br/>
A: <input value={count} on:input={handleChange}/><br/>
Updated, to clarify, I simply want to undo whatever I consider an invalid input, retrospectively after it has happened, by handling the change event, without mutating the component's state itself (counter here).
That is, without Blazor-specific two-way data binding, HTML native type=number or pattern matching attributes. I simply use the number format requirement here as an example; I want to be able to undo any arbitrary input like that.
The user experience I want (done via a JS interop hack): https://blazorrepl.telerik.com/wPbvcvvi128Qtzvu03
Surprised this so difficult in Blazor compared to other frameworks, and that I'm unable to use StateHasChanged to simply force a re-render of the component in its current state.
