Firefox contenteditable image selected after drop - can't remove selection

Question

If you drag-and-drop around an image in Firefox in a contenteditable area, sometimes the images will end up being selected like this:

Selected image

Fiddle here: http://jsfiddle.net/zupa/qg5Qh/

You may need to drag-drop it a few times, I have this bug in like 20+% of the time.

I am using Firefox 13.0.1 on Windows 7

How to remove that selection? Any help is appreciated.

Ps:

It is not available as a range via document.getselection().getRangeAt(..)
Firefox does NOT add any HTML attributes, still if I hit save (custom CMS), and reload the page in contenteditable mode, the selection comes back. Seems to be an annoying bug.

What platform are you using? I created a demonstration video as well: http://youtu.be/dXCWjjJ1HGY (there I have 13% error rate) — zupa, Jun 25 '12 at 21:11
Replicated on Windows XP Firefox 13.0.1 as well (close to 50% error rate) — zupa, Jun 25 '12 at 21:22

score 3 · Accepted Answer · edited May 23 '17 at 12:12

It does it reliably when the image is within a word that is marked by Firefox as a spelling error. For example, here's your jsFiddle with the image moved into the middle of the word "Lorem": http://jsfiddle.net/timdown/qg5Qh/1/

It seems to be something to do with the styling applied to misspelled words. Add the word "Lorem" to the browser's dictionary and the image styling goes away.

You could switch spellchecking off using the spellcheck attribute. From what I can gather, you have to do this at the <body> level in Firefox because it doesn't seem to work on single contenteditable elements as it does for textareas.

Demo: http://jsfiddle.net/timdown/qg5Qh/2/

I am totally amazed that you spot this. Wow. Thank you Tim! – zupa Jun 26 '12 at 09:59 — zupa, Jun 26 '12 at 09:59

Firefox contenteditable image selected after drop - can't remove selection

1 Answers1