Blazor binding input value to oninput not working with onkeypress

Question

I am using blazor to do a search. When I press a key in the input it checks if its an enter key and if it is then initiates the search. However, it appears that the value of the binded variable(keywordValue) does not update until i hit enter twice in a row. The first time if i press it the value is not updated.

<h1>Blogs</h1>
<fieldset>
    <label>Keyword Search</label>
    <input type="text" @bind="keywordValue" @bind:event="oninput" @onkeypress="KeywordEnterPressed"/>
    <button type="submit" @onclick="SearchBlogs">Search</button>
</fieldset>

private string keywordValue { get; set; }
protected async void KeywordEnterPressed(KeyboardEventArgs eventArgs)
    {
        if (eventArgs.Key == "Enter")
        {
            await SearchBlogs();
        }
    }

For example: If i type "test" into the input field and press enter it runs searchblogs() with a value of "". When i hit enter again then it runs searchblogs() with a value of "test" like it should.

@onkeypress is obviously firing before the binding kicks in; you can try to implement your logic in the setter of keywordValue — Nick

enet enet · Accepted Answer · 2020-03-26T18:27:12

You should use Task instead of void

Write: protected async Task KeywordEnterPressed instead of protected async void KeywordEnterPressed

Incidentaly, the type of the button element should be "button" instead of"submit"

Do this : <button type="button" @onclick="SearchBlogs"> instead of <button type="submit" @onclick="SearchBlogs">

Hope this helps...

Blazor binding input value to oninput not working with onkeypress

2 Answers