Closed Bug 562905 Opened 14 years ago Closed 14 years ago

Select all in contentEditable selects the contentEditable element itself.

Categories

(Core :: DOM: Editor, defect)

x86
Windows 7
defect
Not set
normal

Tracking

()

RESOLVED FIXED

People

(Reporter: dalelarsen22, Unassigned)

References

()

Details

Attachments

(1 file)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1064 Safari/532.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

I have divs that use contentEditable. When you select all (ctrl + A) it not only selects the contents of the contentEditable div but it incorrectly selects the contentEditable div itself.

Therefore, when you paste what you selected with ctrl + A it duplicates the contentEditable div.

I have tried a few selection css styles but they do not actually change the selection, just the visiblity of the selection. e.g. -moz-user-select: text, doesn't do the trick.

I have tested that this bug is present in at least Firefox 3.5 and 3.6, possibly others.

Here is an example of the div.

<div contenteditable="true" id="txtArea_1" class="txtArea pageBaseFontStyle" style="width: 100%; cursor: text; border: 1px dotted transparent;">Paragraph Text</div>

Reproducible: Always

Steps to Reproduce:
1. Make a div contentEditable
2. Enter text then press ctrl + A to select all then ctrl + C to copy
3. Then just start pressing ctrl + v to paste it several times.
4. Inspect the content with firebug or something. You will see that the div which is contentEditble is duplicated within itself as many times as you pasted.
Actual Results:  
ContentEditable div is duplicated within itself.

Expected Results:  
Only the contents of the div should be selected, not its container.
Component: General → Editor
Product: Firefox → Core
QA Contact: general → editor
Summary: Select all in contentEditable select the contentEditable element itself. → Select all in contentEditable selects the contentEditable element itself.
I can reproduce this bug on 3.6.8 on a clean profile.

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8

Google Chrome 5.0.375.99 does not exhibit this behavior.

Will add a testcase.

To reproduce:
1. Click anywhere inside the contenteditable div (it has "some text" inside of it)
2. Press ctrl + A
3. Press ctrl + C
4. Press ctrl + v

Expected results:
Only the contents of the div were selected, so after pasting the content should be exactly the same ("some text").

Actual results:
The contenteditable div was selected, so the content is instead "<div ...>some text</div>".  Notice the black border around the new div.

Another problem this introduces is that document.execCommand will apply styles to the contenteditable div itself, rather than creating a styled span within the editor.

To reproduce:
1. Click anywhere inside the div
2. Press ctrl + A
3. Click the Bold button

Actual results:
The div's style attribute is changed to "font-weight: bold;"

Expected results:
A span is added around "some text" within the editor with the appropriate style


Also probably related, using range.selectNodeContents on this div will select the entire div as before.

To reproduce:
1. Click anywhere inside the contenteditable div
2. Click the selectNodeContents button
3. Press ctrl + c
4. Press ctrl + v

Actual results:
The div now contains "some text<div ...>some text</div>"

Expected results:
The div now contains "some textsome text"


Using Right-click > Select all produces the same results as ctrl + A
Attached file testcase
The testcase seems to be fixed using a current nightly build (Gecko/20101130 Firefox/4.0b8pre).
Status: UNCONFIRMED → NEW
Ever confirmed: true
Yes, this seems to be fixed on trunk.
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
Is bug 583980 a dupe?
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: