1499029 - [contenteditable] Click inside contenteditable block element when last children is non-editable moves caret into that non-editable.

Status: NEW

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

Description

[kajetanl]

Attachment: test.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Steps to reproduce:

1. Open attached HTML file.
2. Click behind span element with text '/non editable/'.

Alternative steps:
1. Place caret before `/non editable/`text.
2. Press right arrow.


Actual results:

Caret is moved into an element with `contenteditable="false"`.


Expected results:

Caret should stay in `contenteditable` element behind text.

Comment 1

[sergeykish]

Can not reproduce

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0

Comment 2

[sergeykish]

Attachment: firefox-55-caret.png

Attached file is not that simple. I've tried it on Firefox 48, Firefox 55 and Firefox 62 (looks same for me)

1. Place caret just before /non editable/ like so Test |/non editable/
2. Right - caret moves next line (picture attached)
3. type characters - nothing
4. Right - caret moves slightly right, still down
5. type characters - nothing
6. Right - caret moves up
7. type characters - works!
8. Right - caret moves up (like step 2)
9. Right - next step (4)
10. etc

1. Click on /non editable/
2. it selects
3. Delete removes it

1. Double click "Test'
2. highlights entire line

1. Backspace "Test " and one more
2. everything removed

1. Delete "Test " and one more
2. /non editable/ removed

1. Down - caret moves next line
2. type characters - caret moves up, characters displayed

1. Down - caret moves next line
2. Left - caret down
3. type characters - nothing
4. Left - caret moves up (on the end of line)
5. type characters - nothing
6. Left - caret before /non editable/
7. type characters - works

<p>Test <span contenteditable="false"><span>/non editable/</span><span style="position:absolute; display: block;"><img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></span></span><br> </p>

Comment 3

[sergeykish]

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0

Found issues with attached sample:

---

Invisible left navigation inside contenteditable:

1. With mouse or keyboard place caret after /non editable/
2. Left - caret disappeared
3. type characters - nothing
4. Left 14 more times (altogether 15)
5. it appears on "Test| /non editable/"

---

What if I tried to return back from Left:

1. With mouse or keyboard place caret after /non editable/
2. 1 Left - 3 Right to return back
3. 2 Left - 4 Right ...
4. 3 Left - 5 Right
5. 14 Left - 16 Right

---

Double click "Test" selects part of /non editable/, can't remove:

1. Double click "Test"
2. Highlights "Tests " (with space)
3. Delete, Backspace - does not work
4. getSelection() - focusNode: #text /non editable/

Same with mouse selection -

1. Mouse down on |Tests
2. Move on top of /non editable/
3. Move left `|/non editable/ but not on the space
4. Mouse up
5. Same selection as Double click

But if moved left on top of "Tests" and back to space it selects "Tests " (without /non editable/)

---

Backspace does not remove /non editable/ but Delete removes.

---

Remove /non editable/ by Backspace before it:

1. Remove "Tests " (Backspace, Delete or mouse selection Backspace, Delete)
2. Put caret before /non editable/
3. Backspace
4. it removes entire <div> content

---

Once "Tests " removed and caret moved elsewhere I can't put it before /non editable/ (but I can put it after)

---

Where are a lot of problems, should I split them?
As I could not reproduce exactly reporters steps it would be great if someone checked on Mac

Comment 4

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

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit BugBot documentation.