[Components] OnChange and OnInput do not get the value

[xclud]

I am trying on get oninput or onchange handlers working with contenteditable. My code is as below:

<p contenteditable="true" oninput="@HandleChange" onchange="@HandleChange">@Text</p>

@functions{
    [Parameter] string Text{get;set;}

    void HandleChange(UIChangeEventArgs e)
    {
        Console.WriteLine(e.Type + " " + e.Value);
    }
}

In above code e.Value is always null.

I should note that it works well with input and bind. But i need this to work for a p and div. I need the value as string, however it would be nice to get the value as html (innerHTML) as well.

Any solution, please?

[enetstudio]

UIChangeEventArgs.Value returns the value of the input (value property), but only form elements have the value property. The div element does not have a value property, which is why e.Value is always null, though the div element can trigger an input event. You can solve this using JSInerop, I guess...

Paragraph elements don’t have input either, reason why your value is always null. You can do as suggested above, trigger the events from the parent div.

[xclud]

@enetstudio Thank you for the suggestion. I already have thought of this workaround but i was looking for a better solution.

Input event comes from HTML DOM and DOM has no limitation if the element has a value or not. This limit came from Components/Blazor and i understand why; because in JS objects are typeless and ... the rest of js story. C# also comes with dynamic and object classes so the idea is not that hard to implement.

@yopez83 <p> does have input event. It works in Blazor/Components and in pure html+js.

@xclud you're right about pure html+js, only when the contenteditable property is set to true.

[SteveSandersonMS]

Thanks for the explanations!

I'll close this then, since it's really just a matter of how events work in browsers and is separate from Razor Components.