Skip to content

Conversation

@javiercn
Copy link
Member

@javiercn javiercn commented Dec 2, 2025

Summary

This PR implements support for binding values to contenteditable elements in Blazor, addressing issue #9974.

What was implemented

JavaScript Core Changes:

  • EventTypes.ts: Added isContentEditableElement() check and handling in parseChangeEvent() so standard @oninput works with ChangeEventArgs.Value containing the element's textContent
  • EventFieldInfo.ts: Added contenteditable support to getFormFieldData() for proper reverse mapping of textContent back to attributes
  • DomSpecialPropertyUtil.ts: Added contenteditable handling in tryApplyValueProperty() to set textContent when applying the 'value' attribute

Test Infrastructure:

  • Added ContentEditable test section to BindCasesComponent.razor with three scenarios
  • Added custom contentblur event registration in BasicTestApp.lib.module.js
  • Added ContentEditableEventArgs class and [EventHandler("oncontentblur", ...)] attribute
  • Added 3 E2E tests in BindTest.cs

Key Findings During Implementation

  1. Standard events work for input: The standard @oninput event with ChangeEventArgs works correctly for contenteditable elements after the JS changes. No custom event needed for input-based updates.

  2. Custom event needed for blur: Standard @onchange does NOT fire on blur for contenteditable elements (this is browser behavior), so a custom @oncontentblur event mapped to the browser's blur event is required to capture the final value when the user clicks away.

  3. 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 JavaScript ExecuteScript() to set textContent directly and dispatch events.

Pending Steps

  • Documentation update for contenteditable binding usage
  • Consider adding @bind directive support (currently requires explicit @oninput handler)
  • Review whether ContentEditableEventArgs should be part of the framework or remain as a custom event pattern example

Fixes #9974

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area-blazor Includes: Blazor, Razor Components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants