685452 - Delete doesn't work correctly on contenteditable=false spans nested in contenteditable=true elements after initial click

Status: RESOLVED DUPLICATE of bug 1665167

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

Description

[Ioana (away)]

Attachment: reduced test case

Mozilla/5.0 (Windows NT 6.0; rv:7.0) Gecko/20100101 Firefox/7.0
Mozilla/5.0 (X11; Linux x86_64; rv:8.0a2) Gecko/20110907 Firefox/8.0a2
Mozilla/5.0 (X11; Linux x86_64; rv:9.0a1) Gecko/20110831 Firefox/9.0a1

STR:
 1. Open the attached test case.
 2. Place the caret right in front of a blue letter (each blue letter represents a span).
 3. Try to delete the span by using Delete.

Expected Results:
 The span (blue letter) is deleted without any issues.

Actual Results:
 The span (blue letter) cannot be deleted.

Workaround:
 After moving the caret even just one position, Delete starts working.

Comment 2

[Ioana (away)]

This bug was about Delete not working only right after loading the web page. If you move the caret just one position or simply click somewhere on the page, Delete starts working.

Bug #685445 is about Backspace not working ever on contenteditable=false elements in contenteditable=true elements.

Comment 3

[Aaron Kaluszka]

Strange, I am seeing different behavior it today's build than yesterday's where  Delete wouldn't work at all before. In any case, there are a few things going on here. None of them actually have anything to do with whether the web page was just loaded.

- Depending exactly where you click (on a blue letter or right outside of a letter), you can end up inside of the inner (contenteditable=false) span as evidenced by the blue caret, or outside (black caret).
- When inside the inner span, you cannot use Delete or Backspace as would be expected.
- When outside and immediately left of the inner span, Delete does something strange. It deletes the character immediately following the blue letter, and then moves the caret back immediately following the preceding blue letter.
- You can delete the inner spans if you position using the arrow keys or simply deleting all of the intervening characters to reposition the cursor, but repositioning with a mouse click will yield the same results as above.
- You cannot delete the final span in any case. The cursor moves backwards as in the previous case if you start from a position immediately preceding the final span, but nothing will let you delete the character. (This might be a separate bug)

Comment 4

[Gezim Hoxha]

The keeps getting weirder :).

Here are few things I noticed:
-If the blue letter is the last node in the containig node (with no text following it), you can't delete it with <Delete>.
-If the blue letter is the last node in the containing node, you cannot place the caret past the blue letter using arrow keys.
-If the blue letter is the first node in the containing node, you cannot place the caret before it using arrow keys.
-If two or more blue letters are next to each other anywhere in a containing node, you cannot carrot between them using arrow keys or mouse (mouse highlights one or the other).

Blue letter is a synonym for a <span> with the "contentEditable" attribute set to false.

Comment 5

[huxiaoxi]

For this HTML as below, when cannot delete the contenteditable false element in FF, when I press backspace.

<div id="rtetext" class="cm-rtetext undoreset fullSSL" role="document" aria-label="Message Body" spellcheck="true" autocorrect="false" style="min-height: 192.4px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 16px; font-family: bookman old style,new york,times,serif;" contenteditable="true"><p id="yui_3_16_0_1_1435010062189_4472"><br><br></p><div id="yui_3_16_0_1_1435010062189_4471" style="display:block;" itemscope="" itemtype="http://schema.org/ImageObject"><div id="yui_3_16_0_1_1435010062189_4470" class="yahoo-compose-assist-image-card ymail-preserve-class" style="width:100%;" contenteditable="false"><img data-id="756b5a17-ff54-6723-599f-a9f4472724aa" style="vertical-align:middle;width:50%;max-width:400px;" src="https://mg.mail.yahoo.com/ya/download?m=YaDownload&amp;fid=Draft&amp;mid=1_0_AGpUimIAABjdVYiBCwh74I5ZGFA&amp;pid=2&amp;check_content_type=2&amp;fullscan=1&amp;YY=16277639474622253&amp;appid=YahooMailMobile" alt="Summer of Service - BY Article Image.jpg" itemprop="contentUrl"></div></div><p><br><br></p><br></div>


However, a weird thing is that, when I add a white space(line-break) after this tag <div id="yui_3_16_0_1_1435010062189_4471" style="display:block;" itemscope="" itemtype="http://schema.org/ImageObject">. It works fine. I can delete the contentEditable false element using backspace. As below, everything is correct, only more line of white-space.

<div id="rtetext" class="cm-rtetext undoreset fullSSL" role="document" aria-label="Message Body" spellcheck="true" autocorrect="false" style="min-height: 192.4px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 16px; font-family: bookman old style,new york,times,serif;" contenteditable="true"><p id="yui_3_16_0_1_1435010062189_4472"><br><br></p><div id="yui_3_16_0_1_1435010062189_4471" style="display:block;" itemscope="" itemtype="http://schema.org/ImageObject">
    <div id="yui_3_16_0_1_1435010062189_4470" class="yahoo-compose-assist-image-card ymail-preserve-class" style="width:100%;" contenteditable="false"><img data-id="756b5a17-ff54-6723-599f-a9f4472724aa" style="vertical-align:middle;width:50%;max-width:400px;" src="https://mg.mail.yahoo.com/ya/download?m=YaDownload&amp;fid=Draft&amp;mid=1_0_AGpUimIAABjdVYiBCwh74I5ZGFA&amp;pid=2&amp;check_content_type=2&amp;fullscan=1&amp;YY=16277639474622253&amp;appid=YahooMailMobile" alt="Summer of Service - BY Article Image.jpg" itemprop="contentUrl"></div></div><p><br><br></p><br></div>

Comment 6

[Marijn Haverbeke]

The part of this that still hasn't been fixed is probably the same as issue 646753 — you can delete the uneditable elements in the middle of the paragraph, but not the one at the end. Backspace still fails for every single one.

Comment 7

[Yvon Hilcenko]

Still facing this issue on the latest version of Firefox (v66.0.3).

Comment 8

[Samuel Dantas]

Issue confirmed on Firefox 66.0.3 (64-bit).

Comment 9

[yair even or]

Happens also for me on Windows 10 version 70.0b14 (64-bit)

Very annoying bug which is super critical for my tags component (github.com/yairEO/tagify) to work properly

Comment 10

[rburnie]

Bug still exists in Firefox mac 78.0.1 (a colleague said she sees in on windows)
Even if you inspect a content editable field, edit its html and then add <span contenteditable="false">hello?</span> it wont be deleteable.

Note: we have notice that contenteditable="false" elements added while focussed are able to be deleted, but if you blur and refocus or they pre exist before focus the are not able to be deleted.

I also noticed that if i add a <span contenteditable="true"></span> after the contenteditable="false" el (which cant be deleted) that the act of deleting the contenteditable="true" one seemed to make it possible to delete the contenteditable="false" one.

So thats how I will be "fixing" this issue currently, which is awful :(

Comment 11

[Kagami Rosylight [:saschanaz] (they/them)]

Let's track this in bug 1665167.