Add contenteditable binding support for Blazor#64610
Draft
Conversation
This implements support for binding values to contenteditable elements, addressing GitHub issue #9974. Changes: - EventTypes.ts: Added contenteditable handling to parseChangeEvent() so @oninput works with ChangeEventArgs.Value containing textContent - EventFieldInfo.ts: Added contenteditable support to getFormFieldData() for proper reverse mapping of textContent - DomSpecialPropertyUtil.ts: Added contenteditable handling to set textContent when applying the 'value' attribute Test components: - Added ContentEditable test section to BindCasesComponent.razor - Added custom 'contentblur' event registration in lib.module.js (needed because standard 'change' doesn't fire on blur for contenteditable) - Added ContentEditableEventArgs and EventHandler for @oncontentblur - Added E2E tests in BindTest.cs Fixes #9974
3 tasks
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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