PDA

View Full Version : Editor Tree Firefox/Opera Scroll Bug



jsakalos
7 Jul 2007, 12:46 PM
In Firefox, after editing a node of a tree while scrolled this node is scrolled into view on all subsequent tree clicks.

In Opera, the input field is misplaced after starting editing when scrolled.

Steps to reproduce:



Navigate to http://aariadne.com/accordion/treescrollbug.html
Open source folder
Scroll down
Doubleclick license.txt to start editing
Click somewhere else to stop editing
Scroll up and click extjs

The above html file is self-contained; it contains html markup, css and javascript code. Ext JS 1.1-beta2.

jack.slocum
7 Jul 2007, 1:40 PM
This could be the same issue with getXY that is causing a lot of problems. Can you try it with the latest SVN version?

jsakalos
7 Jul 2007, 2:15 PM
This could be the same issue with getXY that is causing a lot of problems. Can you try it with the latest SVN version?

Bad news Jack, :(

it behaves same at least in FF. SVN trunk 698.

jack.slocum
7 Jul 2007, 6:15 PM
Alrighty. If you could package that file up so I can drop it into examples/tree and post it here, that would be great.

jsakalos
8 Jul 2007, 3:09 AM
Alrighty. If you could package that file up so I can drop it into examples/tree and post it here, that would be great.

OK Jack,

here is file that fits into examples/tree. It uses get-nodes.php that is already there. I had to zip it; html was refused by forum uploader.

jsakalos
9 Jul 2007, 5:13 PM
Any news on this Jack?

jack.slocum
9 Jul 2007, 9:23 PM
It's in the pipeline. ;)

mystix
10 Jul 2007, 9:47 AM
[preliminary findings:]

jsakalos's test case with a few listeners added (code additions to the original test case are in red):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tree Scroll Bug Showcase</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function() {
var tree = new Ext.tree.TreePanel('tree-ct', {
animate: true,
loader: new Ext.tree.TreeLoader({dataUrl: 'get-nodes.php'}),
containerScroll: true,
enableDD: true,
listeners: {
beforeclick: function(node, e) {
console.log('treepanel beforeclick event ', node, e);
},
click: function(node, e) {
console.log('treepanel click event ', node, e);
}
}
});
var root = new Ext.tree.AsyncTreeNode({
text: 'Ext JS',
id: 'source'
});
var treeEditor = new Ext.tree.TreeEditor(tree, {
allowBlank: false
});
tree.setRootNode(root);
tree.render();
root.expand();

Ext.get('tree-ct').on({
click: function(e) {
console.log('treepanel\'s container click event ', e);
},
scroll: function(e, el, b) {
console.log('treepanel\'s container scroll event ', e, el, b);
},
scope: this
});
});
</script>
<style type="text/css">
#tree-ct {
width: 240px;
height: 300px;
top: 48px;
left: 64px;
position: relative;
overflow: auto;
border: 1px solid silver;
background-color: #ffffc8;
}
</style>
</head>
<body>
<div id="tree-ct"></div>
</body>
</html>

watch the Firebug console as you perform these steps.
(be sure to clear the Firebug console just before carrying out step 5.)

Open source folder
Scroll down
Doubleclick license.txt to start editing
Click somewhere else to stop editing
Scroll up and click extjs


the moment step 5 has been carried out, observe the Firebug console and notice that no click events have been captured -- only a single scroll event is captured at this point in time.


[other findings:]

using the ext-base.js adapter also results in the same problem
in FF1.5.0.12 on WinXP, Firebug throws the following error the moment step 3 is carried out:
"[Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMEvent.type]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost:8080/ext-1.1-rc1/ext-all-debug.js :: anonymous :: line 1781" data: no]" with no visible side effects
no problems in IE7



[preliminary conclusion:]
i'm thinking it's a ScrollManager problem -- the ScrollManager (i think) or something seems to be intercepting the click in step 5. more digging is required... ~o) but for now, i'm off to I-|

mystix
31 Aug 2007, 9:56 AM
[bump]
i just tried treescrollbug.html in 1.1.1, albeit unsuccessfully (i.e. it's still there)...

[findings]
if no TreeEditor is created, then there's no problem.
once a TreeEditor has been created, the bug only surfaces in FF (but works fine in IE6/7) after the TreeEditor has entered edit mode for the first time, and persists for the life of the TreePanel.

the bug does not surface in FF if both the last-edited TreeNode and the TreeNode which the user intends to edit fall within the visible area of the TreePanel's container.


p.s. could this be an FF bug related to this thread?

jsakalos
31 Aug 2007, 10:27 AM
I have added the above mentioned events to the showcase and I've upgraded Ext to 1.1.1 on the showcase's server.

Bug is still there.

mystix
31 Aug 2007, 10:29 AM
yeah... sadly still there.

it still piques my interest though i have no idea where to look now.
it's not the ScrollManager as i initially thought it was... i'm leaning towards the notion that it's really just an FF bug.

jsakalos
31 Aug 2007, 10:44 AM
I'd like to believe that too but it behaves oddly also in Opera. Not same as in FF but there is definitely something wrong in this area.

I'll notify Jack on the matter.

Grimsk
20 Sep 2007, 12:58 PM
same on safari here !?

jack.slocum
21 Sep 2007, 11:43 AM
Try adding position:relative on the overflow (scrollbar) element.

joe1chen
23 Oct 2007, 1:01 PM
Any progress on this bug?

I'm using Ext 2.0 beta 1 and am still seeing this problem. I'm willing to debug the problem if someone will point me in the direction to look.

joe1chen
23 Oct 2007, 2:23 PM
Ok, it looks like I've found a solution for this bug.

The bug can be fixed by commenting out the mousedown handler in TreeEditor's initEditor method.



initEditor : function(tree){
tree.on('beforeclick', this.beforeNodeClick, this);
/*tree.getTreeEl().on('mousedown', this.hide, this);*/
this.on('complete', this.updateNode, this);
this.on('beforestartedit', this.fitToTree, this);
this.on('startedit', this.bindScroll, this, {delay:10});
this.on('specialkey', this.onSpecialKey, this);
},


Not sure why this fixes the bug but everything still seems to work properly after removing this line.

Tested on Firefox 2.0, IE6, and Safari 3.0.3 Windows.

jsakalos
23 Oct 2007, 2:27 PM
Thank you for debugging. We well investigate it further if there are not any other consequences of disabling the mouse handler.

jsakalos
24 Oct 2007, 5:20 PM
I have tested this fix and I found it functional and harmless. I've recommended to include it in both 1.1.1 and 2.0, final decision is on him, though.

frankel
25 Oct 2007, 12:56 AM
Thank God~ This bug confused me for quite a lot of time. Thanks to joe1chen.

Which version will the updated version go to?

jsakalos
25 Oct 2007, 1:23 PM
Both 1.1.1 and 2.0