Children of split elements have misplaced cursor and clears all content on single backspace press with contenteditable="true"
Hi,
The title might be hard to understand but the situation is simple. My document has a structure like:
<div class="section">
<div class="story">
<div class="headline" conteneditable="true">Foo..</div>
<div class="bodytext">text...</div>
</div>
<div class="story">
<div class="headline" conteneditable="true">Baz..</div>
<div class="bodytext">text...</div>
</div>
<div class="story">
<div>HACK - This div placed here (now first child), fixes the issue, now the bellow editable will work as expected!</div>
<div class="headline" conteneditable="true">Bar..</div>
<div class="bodytext">text...</div>
</div>
</div>
Now, on the very first page editing headline
works as expected, but when you try to edit a headline element on the other pages the cursor goes nuts (it's ~ 6 chars offset to the right) and if you press backspace (with the cursor being at the end of the text) it clears the whole text in the element (instead of deleting char by char)
Interestingly, if I place a dummy element above one of the headline
elements (as in the 3rd block) the headline element will behave normally - you can nicely edit, delete the text in it as expected.
This bug exist in Chrome, tried in Firefox and it works without an issue.
You can find a sample demoing the bug here: https://js-lmuhpn.stackblitz.io, just try to edit the first headline on the second page, then try the next with the red "fix" above to see it working if not the first child any more.
Thanks, vedtam