Red spellcheck squiggles remain in chrome after editing is disabled

Question

UPDATE: This has been identified as a bug in Chrome. (Thanks @michael-robinson)

In Chrome (v22 at least), I notice that it's possible for spellchecking "red squiggly" underlines to remain even after contentEditable has been disabled.

I made a jsfiddle to demonstrate: jsfiddle demo.

Even if I set the attribute spellcheck="false" before disabling contentEditable, they remain.

Anyone know how a nice way to solve or work around this? Ideally I'd retain the built-in spell checking functionality when the content is editable.

Answer 1

Have you tried setting display: none (using CSS) and then setting the display back to what it was? Might force Chrome to redraw the element... (didn't work, see other solution below)

Alternatively, you could create a copy of the element (but with contenteditable disabled) placing it just after the original element and deleting the original element.

UPDATE 1: first solution didn't work, but second one does. Updated JSfiddle http://jsfiddle.net/RegVn/6/

UPDATE 2: above solution uses innerHTML which removes destroys event handlers. It also destroys the selection/caret position.

New method uses jQuery's clone() method (in deep clone mode) to create a copy of the object (which copies over the event handlers), and has custom functions to save a reference to the selection, and restore it afterwards. Note that the selection save/restore functions wont work in ie6-8, but I thought that this was acceptable as the question is tagged Chrome. Updated JSfiddle: http://jsfiddle.net/RegVn/23/