Blazor how to use bind-value:event=“oninput” with @oninput=“FooFunc” together

Question

I am using Blazor server-side.

I have few input boxes that are binded to different values, but they have to call the same function whenever there was input. The function essentially starts timer that is meant to save data after X amount of time passed.

Summary: <input class="summary-input @Utilities.SummaryWarning" type="text" @ref="Utilities.CreateSummaryRef" placeholder="Describe summary of an issue." @bind="Utilities.CurrentlyViewedProblem.SummaryText" @oninput="RestartSaveTimer">

My issue here is that with this code, the input boxes behave not like oninput, but more of onchange. The value will not be binded until the box looses focus. But the timer is started on each keystroke. So My desired result is for value to be binded on keystroke and timer be started on keystroke.

The only way I could think of is to make Individual RestartSaveTimer methods for each box that will update value manually, but In my case that is not desired as input boxes are populated dynamically depending on size of data.

I tried adding @bind:event="oninput" to it. But it complains that oninput is used two ore more times.

Keep in mind that I have multiple of these lines where bind is binded to different attribute, but they all have to call same RestartSaveTimer

Edit

So the other boxes are populated by for loop

@foreach (Solution solution in Utilities.CurrentlyViewedProblem.SolutionsList)
{
    <div class= "solution">
        <textarea class="solution-input" placeholder="Describe solution to an issue." @bind="solution.SolutionText" @oninput="((ChangeEventArgs e) => CheckSolutionRestartTimer(e, solution))"></textarea>
        <div class="vote">
            <button class="vote-button" @onclick="@(() => IncrementVote(solution))"></button>
            <div class="vote-label">@solution.Votes</div>
        </div>
    </div>
    <div class="date-box-solution">
        <div class="date-created"> Created on: @solution.Created.ToLocalTime()</div>
        <div class="date-modified"> Last Modified On: @solution.LastModified.ToLocalTime()</div>
    </div>
}

Mykhailo Bykhovtsev Mykhailo Bykhovtsev · Accepted Answer · 2020-05-21T20:10:27

I have found solution to my issue. So I will post for anyone who had similar issue. I found the answer here https://github.com/dotnet/aspnetcore/issues/11178

The solution is to use different handler.

<input class="summary-input @Utilities.SummaryWarning" type="text" @ref="Utilities.CreateSummaryRef" placeholder="Describe summary of an issue." @bind-value="Utilities.CurrentlyViewedProblem.SummaryText" @bind-value:event="oninput" @onkeyup="@RestartSaveTimer">

As you can see here I bind value on input by using @bind-value="ValueName", @bind-value:event="oninput" bind the value when I put input. And @onkeyup="@Funcname" will call my function when key is released. Not exactly ideal, I would prefer if you can have multiple handlers for single thing like oninput. But for my purposes it works perfectly.

Blazor how to use bind-value:event=“oninput” with @oninput=“FooFunc” together

1 Answers