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.

Answer 1

Because of the event ordering, I got this to work by using "onkeyup" instead of "onkeypress"

Answer 2

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...