dotnet/aspnetcore

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

Open

#9974 aperta il 4 mag 2019

Vedi su GitHub
 (24 commenti) (69 reazioni) (2 assegnatari)C# (10.653 fork)batch import
Pillar: Complete Blazor WebPriority:2affected-fewarea-blazorenhancementfeature-blazor-component-modelfeature-razor.languagehelp wantedon-roadmapseverity-nice-to-have

Metriche repository

Star
 (37.933 star)
Metriche merge PR
 (Merge medio 16g 9h) (258 PR mergiate in 30 g)

Descrizione

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

Guida contributor

Direzione di ricerca
Indagare come funziona il data binding bidirezionale di Blazor (`bind` e `bind value oninput`) con gli elementi `contenteditable`. Esaminare il codice sorgente della gestione degli eventi nel renderer di Blazor per capire perché l'evento `oninput` non viene attivato per i div contenteditable. Verificare se esiste un workaround utilizzando l'evento `@oninput` con l'interop JS.
Tech stack
csharp
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
C#Blazor
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
65