I'm working on my version of an auto complete component in a Blazor WASM (Standalone) app targeting .NET 9.
I'm able to bind an input to a string variable and take action as user types in his/her search keyword using @bind:after using the following code and it works fine but when I try to move the UI of my auto complete into a component, binding the input to my variable doesn't seem to work. The bind:after part continues to work fine and I hit my method after each keystroke.
Here's the code that works fine which I then move into a component:
...<input @bind="UserInputText" @bind:event="oninput" @bind:after="OnUserInputChanged" />...@code { private string? UserInputText = ""; private void OnUserInputChanged() { // Process user input and make suggestions }}I then take the UI part and place it into a new component I'm creating to encapsulate auto-complete into its own component.
Here's the parent code:
...<AutoComplete UserInputText="UserInput" UserInputTextChangedHandler="OnUserInputChanged" />...@code { private string? UserInput = ""; private void OnUserInputChanged() { // Process user input and make suggestions }}And here's the code inside the AutoComplete component:
@typeparam TItem<div><input @bind="UserInputText" @bind:event="oninput" @bind:after="UserInputTextChangedHandler" /></div>@code { [Parameter] public string? UserInputText { get; set; } [Parameter] public Action UserInputTextChangedHandler { get; set; } [Parameter] public List<TItem> Suggestions { get; set; }}BTW, I tried using EventCallback instead of Action for passing OnUserInputChanged to the auto complete component but then I get an error that states:
Argument 1: cannot convert from'Microsoft.AspNetCore.Components.EventCallback' to 'System.Action'
Please also keep in mind that wiring the OnUserInputChanged actually continues to work fine even after I place that logic into the new component. The part that no longer works is binding UserInputText to the input inside the component.
Where am I making a mistake?