'Blazor binding input value to oninput not working with onkeypress

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.

c++sharphtmlasp.net-coreblazorasp.net-core-3.1


Solution 1:[1]

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

Solution 2:[2]

As per Nick's comment it appears to be the event ordering, binding not happened when key pressed event is run. I added a Task.Delay(100) to the key pressed event before the search to allow time for the binding and now behaving for me. Not great as the 100 is totally arbitary.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ken
Solution 2 Rocklands.Cave

Related Questions