Blazor button event firing multiple times

Question

I havea blazor app in which a button event is triggered when pressed. The problem is that the event is fired 3 times each time you press the button. I just noticed that if I press Enter instead of clicking the button the event fires just once. (And I don't really know why...)

This is the button and some more html if needed:

    <div class="form-container uk-flex uk-flex-column uk-flex-middle">
        <span class="input-container">
            <input type="text" name="verb" id="form_verb" @bind="searchInput" />
        </span>
        <!-- This is the button -->
        <button type="button" class="uk-button uk-button-secondary" style="width:40%; margin-top:0.25rem;" @onclick="@Search">Lorem ipsum</button>
    </div>
    <h1>@counter</h1>

And this is the event that is fired:

private async Task Search()
{
    counter = counter + 1;
    navigatableSearchInput = searchInput;
    await tablaReconocimientos.SearchVerb(searchInput);
}

Here you have an example of whats going on:

EDIT_1: changed @onclick event with @onclick="@Search". Same behaviour.

EDIT_2: pressing enter behaviour added.

EDIT_3: markup for button clarification

Your example is a bit light on details, but can you change your button click handler to @onclick="@Search" and update your question with the result? — Nik P
Just updated with your request. The behaviour still is the same. What else can I write here to give you more info? It is almost all the code in the page. — Carlos Martel Lamas
It looks to me like the button fires every time the page is rendered/updating and the real click. Can you attach your code for the button? — Taladan
@Taladan the code for the button is above an so is the event that is fired. Were you talking about that? EDIT for the mark at the button component. — Carlos Martel Lamas

Carlos Martel Lamas Carlos Martel Lamas · Accepted Answer · 2020-04-24T11:48:13

As @Taladan mentioned above, the function was called every time the page was rendered or updating. I just didn't notice that I left a call to that function in OnAfterRender(). I just changed that part to be called in OnParametersSet() and worked like a charm.

I had this:

protected override void OnAfterRender(bool firstRender)
{
    if (searchInput != null) Search();
}

And just changed to this

protected override Task OnParametersSetAsync()
{
    if (searchInput != null) Search();
    return base.OnParametersSetAsync();
}

Blazor button event firing multiple times

1 Answers