744408 - Extra BR inserted in pre-wrap contenteditable DIV after select all & delete.

Status: NEW

(Core :: DOM: Editor, defect)

Description

[albright]

Attachment: Sample content editable DIV.

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.15 Safari/536.5

Steps to reproduce:

1. Enter some text in the content editable div with white-space: pre-wrap in the supplied sample page.
2. Inspect the DOM of the DIV to see that there is no BR tag.
3. Select all text and press backspace.


Actual results:

After deleting all text a BR tag (w/ _moz_dirty attribute) is inserted in the DIV.


Expected results:

BR tag should not be inserted. Firefox does not insert a BR tag if you manually backspace through the characters inserted, only if you select all and delete. This makes it impossible to know whether to expect this BR or not in the resulting value of the input.  This bug appears to be present in all recent versions of Firefox.

Comment 1

[[:Aleksej]]

Confirmed with 2013-08-24-03-02-03-mozilla-central-firefox-26.0a1.en-US.linux-x86_64.  Inspector shows "<br></br>".

Comment 2

[Tim L.]

This bug is still very much present in FF39, reproducible using Google Hangouts in Gmail, Inbox, or G+:

Steps to repro:
1. start a chat with someone, type in some message
2. delete the message using backspace
3. click anywhere outside the chat frame (e.g. open an email, click on an empty spot, or anywhere outside the chat frame)
4. click inside the area where previous messages are displayed, note that the mesage input area regains focus and cursor is shown
5. type a message, note that a BR is added above the message
6. this is repeatable to insert as many BRs as repeated

Comment 3

[(no longer active)]

What info are you requesting from me?

Comment 4

[(no longer active)]

Oh, I realize now that I asked Tim to file a follow-up bug for this issue in bug 911201...

Comment 5

[Martin Edenhofer]

I confirm this is still an issue on ff47

"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:47.0) Gecko/20100101 Firefox/47.0"

Comment 6

[sergeykish]

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

Confirmed

Both with Backspace and Delete

Comment 7

[Matthew Dapena-Tretter]

I think this and bug 1513303 are the same.

Comment 8

[sergeykish]

Confirmed on Firefox 75 white-space:pre-wrap is not required, should I change summary?

Comment 9

[sg]

When you have a final whitespace at the end of the contenteditable, when you remove the <br> programatically, then if you type any character after the whitespace, then the whitespace get removed and is replaced with the new character

Comment 10

[Alan Chandler]

The implication of all the above comments is that it is just the contenteditable that has this problem, but in actual fact it is at any level below the contentedititable div. I can also confirm the the comment from @sg above that after removing the <br> tag programatically that typing a character after the white space causes the white space to be removed.

I want to add that I put a mutation observer on contenteditable and when I add the trailing space there are two mutation records, one of type characterData which contains the current Text node as the target with the space present and a second of type childList where the added node is the <br>

When I then remove the <br> in the mutation observer call back I get a second mutation change with just a childList mutation with the <br> as a removed node, but nothing else. Only when I type a new character after the space do I then see a further mutation with a CharacterData record showing the text with the space removed and this new character added.

Here is the html inside the contenteditable with a vertical bar showing cursor selection point

<ol><li>Here is so<ul><li>This|</li></ul>me <span>text in a span some of which is <u>Underlined</u> and <i>Italic</i> but then</span> after the span <b>bold text</b></li><li>This is simpler</li></ol>

Then immediately after the space has been added and the mutation observer was able to remove the <br>

<ol><li>Here is so<ul><li>This |</li></ul>me <span>text in a span some of which is <u>Underlined</u> and <i>Italic</i> but then</span> after the span <b>bold text</b></li><li>This is simpler</li></ol>

And finally after I type another "i"

<ol><li>Here is so<ul><li>Thisi|</li></ul>me <span>text in a span some of which is <u>Underlined</u> and <i>Italic</i> but then</span> after the span <b>bold text</b></li><li>This is simpler</li></ol>