Skip to content

Conversation

@OriginalSkain
Copy link

Fix Grid Filter Typing Experience (Character Loss)

Summary

This PR addresses an issue where characters were being lost when typing quickly into the Grid column filters. The manual @oninput event handling caused re-renders that interfered with the input state, particularly during rapid typing.

This change replaces the manual event handling with Blazor's two-way @bind-value binding, which correctly manages the input state and cursor position during updates.

Changes

GridColumnFilter.razor

  • Replaced manual value="@filterValue" @oninput="..." binding with @bind-value="filterValue" @bind-value:event="oninput" for:
    • Text inputs (String, Guid)
    • Number inputs (Int16, Int32, Int64, Single, Decimal, Double)
    • Checkbox inputs (Boolean - using @onchange)
  • Retained manual handling for Date and DateTime inputs due to Blazor type conversion limitations, but optimized the handler (OnFilterValueInput) to minimize impact.

GridColumnFilter.razor.cs

  • Converted the filterValue field to a property with a setter.
  • The setter now automatically triggers the GridColumnFilterChanged event when the value changes, ensuring consistent behavior with the two-way binding.
  • Removed the obsolete OnFilterValueChangedAsync method.
  • Updated OnEnumFilterValueChangedAsync and OnFilterOperatorChangedAsync to prevent duplicate event firing.

Problem Addressed

Previously, the manual @oninput handler triggered a re-render on every keystroke. If the user typed another character before the re-render completed, the input value in the DOM could be overwritten by the old state from the server/wasm, causing the new character to be lost or the cursor to jump.

By switching to @bind-value, Blazor's internal diffing mechanism handles the input state more intelligently, preserving the user's input and cursor position.

Related Issues

Verification

  1. Open a Grid with filterable columns.
  2. Type quickly into a Text or Number filter column.
    • Expected: All characters appear correctly, cursor does not jump.
  3. Type into a Date or DateTime filter.
    • Expected: Input works correctly and filtering is applied.
  4. Use a Boolean (checkbox) filter or Enum dropdown.
    • Expected: Filtering is applied correctly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant