[CLOSED]moving HtmlEditor within DOM causes it to be unresponsive [Archive]

evanc

30 Jun 2010, 4:14 PM

Ext version tested:

Ext 3.2.1

Adapter used:

ext
jquery

the issue occurs with jquery and ext adapters.

css used:

only default ext-all.css

Browser versions tested against:

FF3 (firebug 1.3.0.10 installed)
Chrome (latest)

Operating System:

Ubuntu
Snow Leopard

Description:

Moving an HTML editor to a different point in the DOM causes it to become unresponsive. Toolbar buttons are clickable, but the editor area may no longer be focused. Any content it had is lost.

Test Case:

demonstration at http://www.coonrod.org/ext/ - source should be easy to understand.

Steps to reproduce the problem:

1. Click inside of HTML editor, note that a cursor appears and you can enter text.
2. Click button labelled "Move htmleditor div". This will move the div containing the HTML editor to a new position within the DOM.
3. Try to click inside of the HTML editor and edit text.

In the latest versions of Firefox and Chrome, you will be unable to focus the HTML editor. If any text had been entered in the HTML editor, it will disappear.

Inserting a node above or below the editor will not cause this problem. Other form fields do not exhibit this problem.

evant

30 Jun 2010, 5:48 PM

It's not a problem specific to the editor, for example (only tested in FF):

Ext.onReady(function(){

var el1 = Ext.getBody().createChild({
tag: 'div',
style: 'border: 1px solid red;',
cn: [{
tag: 'iframe'
}]
});

var doc = el1.dom.firstChild.contentDocument;
doc.open();
doc.write('<html><head><style type="text/css">body{border: 0; margin: 0; padding: 3px; height: 100px; cursor: text}</style></head><body></body></html>');
doc.close();
doc.designMode = 'on';

var el2 = Ext.getBody().createChild({
tag: 'div',
style: 'border: 1px solid blue;'
});

var btn = Ext.getBody().createChild({
tag: 'button',
html: 'Move'
});
btn.on('click', function(){
el2.appendChild(el1.dom.firstChild);
});

});

You'll see you can edit the content, but as soon as you move it, it causes problems. It's likely that moving the frame causes a reflow that somehow messes it up.

The only way I see around this is to recreate the field.