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

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

Based on the number of thumbs up I think a lot of people (including me) are interested in this feature. What should we do to prioritize this work?

I hope this can get into .NET 7, as an additional info:

• The event “input” should be enough for this to work
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
• There is two important fields we should be able to access innerHTML and textContent

in essence we should be able to do the following:

<div contenteditable="true" @bind-innerHTML="PureHtml" @bind-innerHTML:event="input"></div>

and

<div contenteditable="true" @bind-textContent="PureHtml" @bind-textContent:event="input"></div>

📝 It could also be great if the event can be inferred too but is fine if its not.

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.

Thanks for contacting us.

We’re moving this issue to the .NET 8 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it’s very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

I agree definitely a must-have feature textarea is getting killed! contenteditable is so much more user-friendly

Any news on this matter?

kefyru

Your code breaks textareas and inputs. (Try to write somethiong in the textarea, then delete it all. After that is textarea broken.)

Here is my fix:

document.addEventListener("input", onInput);
function onInput(e) {
 let target = e.target;
 if (target.localName == "div") {
   if (!target.value && !target.__contenteditable) target.__contenteditable = true;
   if (target.__contenteditable) target.value = target.innerText;
 }
}

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}

I use contenteditable all the time. Definitely a feature I would like.

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