@bind="" and @oninput="" issue Blazor

[faisal5170]

below is my HTML content

<input type="text" id="txtSearch" placeholder="Search Titles..." class="form-control" @Bind="searchTerm" @oninput="@FilterRecords" />

@code {
private string searchTerm;

public async Task FilterRecords(EventArgs args)
{
//code
}

but when I press key searchTerm property get previous values like If I press "a" it will take null, if I press "ab" it will take "a", press "abc" will take "ab" etc..
}

[SteveSandersonMS]

Yes, this is because the oninput event runs before onchange, so your FilterRecords method runs before the @bind handler has run. By default, @bind attaches to the onchange event.

As an alternative, consider removing oninput, and instead use @bind with @bind:event="oninput". Then you can put arbitrary logic to react to updates inside the setter of whatever property you're writing to. This is simpler because then you only have one event handler to deal with.

[faisal5170]

Thanks, it works, I'm adding a solution below so it will be helpful for others.

<input type="text" id="txtSearch" placeholder="Search Titles..." class="form-control" @Bind="SearchTerm" @Bind:event="oninput" />

@code {
private string searchTerm;
private string SearchTerm
{
get { return searchTerm; }
set { searchTerm = value; FilterRecords(); }
}

public void FilterRecords()
{
    //code
}

}