Skip to content

Grid Filter Network Latency (Blazor Server Only): Input lost when using grid filter with low latency #1247

@OriginalSkain

Description

@OriginalSkain

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:

  1. Go to a page with a Grid component that has filterable columns
  2. Click on a filter input field (text, number, or date filter)
  3. Set developer tool in browser to Throttle connection to 3g speeds
  4. Type quickly or "mash" the keyboard with multiple rapid keystrokes
  5. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions