Add contenteditable binding support for Blazor #64610
Draft
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements support for binding values to
contenteditableelements in Blazor, addressing issue #9974.What was implemented
JavaScript Core Changes:
EventTypes.ts: AddedisContentEditableElement()check and handling inparseChangeEvent()so standard@oninputworks withChangeEventArgs.Valuecontaining the element'stextContentEventFieldInfo.ts: Added contenteditable support togetFormFieldData()for proper reverse mapping oftextContentback to attributesDomSpecialPropertyUtil.ts: Added contenteditable handling intryApplyValueProperty()to settextContentwhen applying the 'value' attributeTest Infrastructure:
BindCasesComponent.razorwith three scenarioscontentblurevent registration inBasicTestApp.lib.module.jsContentEditableEventArgsclass and[EventHandler("oncontentblur", ...)]attributeBindTest.csKey Findings During Implementation
Standard events work for input: The standard
@oninputevent withChangeEventArgsworks correctly for contenteditable elements after the JS changes. No custom event needed for input-based updates.Custom event needed for blur: Standard
@onchangedoes NOT fire on blur for contenteditable elements (this is browser behavior), so a custom@oncontentblurevent mapped to the browser'sblurevent is required to capture the final value when the user clicks away.E2E test automation challenge: Using Selenium's
SendKeys()on contenteditable elements causes text to appear in reverse order because Blazor's re-rendering after each keystroke moves the caret position. The solution is to use JavaScriptExecuteScript()to settextContentdirectly and dispatch events.Pending Steps
@binddirective support (currently requires explicit@oninputhandler)ContentEditableEventArgsshould be part of the framework or remain as a custom event pattern exampleFixes #9974