Set bind(ed) object before onkeyup fires

[cyberjaws]

In this case when the operator presses 'a' in the input form:

<input type=text bind="@SomeString" onkeyup="@Validate" />
@functions
{
   private string SomeString;
   private void Validate()
   {
      if(SomeString == "a") { // do something }
      StateHasChanged();
   }
}

SomeString is still "". It would be nice to have seen SomeString as "a".

[enetstudio]

As far as I know, the value property of the input control is based on the onchange event... You actually ask that the binding would be based on the input event. This can be very useful. Write a Pull Request.

[cyberjaws]

I can see how others might prefer the onchange event being the source of the bind. Could there be a way to designate which event is used in the bind? I see that there are static attributes that are being applied to the types. Likely this would require a more complex change to add another attribute: "bind-event" perhaps?

[Andrzej-W]

You can use code like this:

@page "/"

<input bind-value-oninput="@SomeString" />
<p>@SomeString</p>

@functions{
    private string someString;

    public string SomeString
    {
        get { return someString; }
        set
        {
            if (value == "a")
                someString = "x";
            else
                someString = value;
        }
    }
}

Unfortunately bind-value-onkeyup throws. You can use workaround:

<input onkeyup="(this.dispatchEvent(new CustomEvent('change', { bubbles: true })))" bind="@SomeString" />

Read this #5521.
In my opinion you can close this issue in favour of #5521.

[cyberjaws]

I would concur that this could be closed as a duplicate. Thanks @Andrzej-W !

[Manishbtech]

The syntax onkeyup="(this.dispatchEvent(new CustomEvent('change', { bubbles: true })))" is not working in Blazor preview9. Can anyone suggest the solution?