1588362 - Caret disappears & unable to type when contenteditable last child is not textNode

Status: NEW

(Core :: DOM: Editor, defect, P3)

Description

[yair even or]

Attachment: jsbin.zexomiv.5.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36

Steps to reproduce:

I've made a demo showing there is no caret inside the contenteditable (when focused), if that contenteditable holds a tag inside it, and there isn't any textNode after that tag. (works on Chrome).

The element inside the first contenteditable has a disabled "contenteditable" property on purpose, so it could be deleted as a whole when "backspace" is pressed, and not be edited, because it's function is a "tag".

Tested on Windows10, FF version: 70.0b14 (64-bit)

https://jsbin.com/zexomiv/edit?html,css,output

Actual results:

First example:

1. Caret does not show when clicking inside the "empty" area of the contentedtiable.
2. Cannot type anything either.

Second example:

1. Has textNode at the end of the contenteditable element, which shows the caret on focus and allows typing text.
2. When placing the caret at the end and hitting "backspace" a few times, all the text is deleted, up until the tag inside the contenteditable. it should also get deleted (as in Chrome) but it refuses to be removed from the DOM using backspace. Only gets deleting using select-all (CTRL+A) and then hitting the backspace key.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.