I'm trying to test editing text in a component by using contenteditable="true" attribute (instead of using a textarea), but that attribute is not appearing in the rendered page.
The contenteditable attribute is listed as compatible with LockerService in its API docs, but I tried disabling LockerService and it still doesn't work.
I can use Chrome dev tools to manually add it, and then it works fine, so I know the div element is capable of accepting that attribute.
I tried both "contenteditable" and "contentEditable" to rule out case making a difference, which it doesn't - it doesn't work with either spelling. There are also no errors showing up in the console.
I'm not using an afterRender, or anything else that modifies the DOM.
Below is a minimal sample component illustrating what I'm trying to do:
test_ContentEditable.cmp:
<aura:component>
<div class="redText" contenteditable="true">
This is some sample text to edit. Line 1.<br/>
This is some sample text to edit. Line 2.<br/>
This is some sample text to edit. Line 3.<br/>
This is some sample text to edit. Line 4.<br/>
This is some sample text to edit. Line 5.
</div>
</aura:component>
test_ContentEditable.css (I did this to prove the class attribute is working):
.THIS.redText {
border: 1px solid black;
margin: 10px;
color: red;
}
test_ContentEditable_App.app:
<aura:application >
<c:test_ContentEditable/>
</aura:application>
Below is the markup as it appears in Chrome Inspect, with no contenteditable attribute, but everything else is rendered:
<div class="redText cTest_ContentEditable" data-aura-rendered-by="5:0" data-aura-class="cTest_ContentEditable">
This is some sample text to edit. Line 1.<br data-aura-rendered-by="7:0">
This is some sample text to edit. Line 2.<br data-aura-rendered-by="9:0">
This is some sample text to edit. Line 3.<br data-aura-rendered-by="11:0">
This is some sample text to edit. Line 4.<br data-aura-rendered-by="13:0">
This is some sample text to edit. Line 5.
</div>
Any thoughts on why contenteditable attribute isn't being rendered? Thanks.