Aspnetcore: Blazor: bind-value-oninput or bind does not work with contenteditable divs

Created on 4 May 2019  路  5Comments  路  Source: dotnet/aspnetcore

bind-value-oninput or bind does not work with contenteditable divs

Bug Description

In the below code, the expectation is as and when I edit the div content I need to update the model so that I can then save it back to Database.

To Reproduce

Steps to reproduce the behavior:

  1. Using the latest preview version of ASP.NET Core 3
  2. Run the below code
    <div contenteditable="true" bind-value-oninput="@contentEditableText">
    You can Edit this Text
    </div>
    @contentEditableText
    @functions { string contentEditableText = "You can Edit this Text"; }
  3. As I Type something in the editable div, I need to see the same reflected in the body, but it does not happen that way. The OnChange event does not fire automatically.

Expected behavior

OnChange Event needs to fire and changes in editable div should be bound to the model.

Screenshots

Screen Shot 2019-05-04 at 2 01 06 PM
Screen Shot 2019-05-04 at 2 02 50 PM

affected-few area-blazor enhancement severity-major

Most helpful comment

Reopening in case this is something we choose to address in the future.

All 5 comments

We don't currently support bind with contenteditable. It might be something we add in the future, but it's not directly planned.

In the meantime, you can use contenteditable in conjunction with JS interop to receive notification when edits occur and update your .NET models.

Reopening in case this is something we choose to address in the future.

@SteveSandersonMS please look at #10087. It looks that Blazor renders incorrect HTML when we try to use contenteditable with simple JS interop.

Hello,

if you're planning to implement contenteditable div binding, I addressed an issue few weeks ago related to this (FYI):

https://developercommunity.visualstudio.com/content/problem/1175416/blazor-webassembly-runtimeerror-memory-access-out.html

@SteveSandersonMS: Maybe the contenteditable div binding could resolve my issue also? There comes restrictions when I try to fetch innerHTML from the C# by using JS interop.

{Q}

Reopening in case this is something we choose to address in the future.

That would be great if this feature is supported in future releases.

Was this page helpful?
0 / 5 - 0 ratings