-
-
Notifications
You must be signed in to change notification settings - Fork 105
Description
NOTE: We do not look at .zip attachments for issue investigation.
Describe the bug
Characters are lost or input becomes unresponsive when typing quickly in Grid column filter inputs. This occurs when using manual @oninput event handlers in the filter input fields, causing re-render cycles that interrupt user input during fast typing.
To Reproduce
Steps to reproduce the behavior:
- Go to a page with a Grid component that has filterable columns
- Click on a filter input field (text, number, or date filter)
- Set developer tool in browser to Throttle connection to 3g speeds
- Type quickly or "mash" the keyboard with multiple rapid keystrokes
- See characters being lost or the cursor position jumping unexpectedly
Expected behavior
All typed characters should appear in the filter input field in the correct order without any loss. The cursor position should remain stable throughout typing, and the filter should update smoothly without interrupting the user's typing experience.
Screenshots
Demo Site Video of Issue
Versions (please complete the following information):
- All .NET Version
- BlazorBootstrap all version supporting grid filter
- Blazor Server Only
- Blazor Interactivity Location: Component
Sample code
Sample code to reproduce the issue.
<!-- Current problematic implementation in GridColumnFilter.razor -->
<input class="form-control" type="text" value="@filterValue" @oninput="@(async args => await OnFilterValueChangedAsync(args))" />
<input class="form-control" type="number" value="@filterValue" @oninput="@(async args => await OnFilterValueChangedAsync(args))" />
<input class="form-control" type="date" value="@filterValue" @oninput="@(async args => await OnFilterValueChangedAsync(args))" />// Code-behind handler
private async Task OnFilterValueChangedAsync(ChangeEventArgs args)
{
filterValue = args?.Value?.ToString();
if (GridColumnFilterChanged.HasDelegate)
await GridColumnFilterChanged.InvokeAsync(new FilterEventArgs(filterValue!, filterOperator));
}GitHub repo
Will raise PR with fix
Desktop (please complete the following information):
- OS: Windows
- Browser: Chrome, Edge, Firefox
- Version: Latest versions
Additional context
This is a known pattern issue in Blazor when using manual @oninput event handlers instead of two-way binding. The asynchronous nature of Blazor's rendering cycle causes the DOM state to become inconsistent with the model state during rapid typing, resulting in lost keystrokes or cursor position issues.
Related ASP.NET Core issues documenting this behavior:
- Issue #8204 - Components bind-value-oninput can lose cursor position with fast typing
- Issue #14242 - Poor typing experience in Blazor Server app when manually binding to oninput event
- PR #11438 - Fix for enforcing consistency between .NET model and DOM for two-way bindings