[ALL] TreePanel does not prevent default action on multi selection in Firefox

[willydee]

This looks like a browser related bug:

I created a TreePanel with a MultiSelectionModel. When trying to select multiple nodes, either with SHIFT or CTRL key pressed, Firefox opens a new tab or window, so the multiselection is unusable. Internet Explorer does not show this behaviour, neither does Safari. The problem is reproducible with the examples, too (even if there's no multi selection model applied, pressing a modifier key forces a new tab or window to open).

Other behaviours of TreePanel working not as I'd expect them:
- SHIFT-Click for selecting a range of nodes doesn't work
- Navigating the tree with cursor keys and holding the CTRL or SHIFT key doesn't do anything either

All of these things are working fine within a grid control. I understand that tree and grid are entirely different under their hood, but IMHO the interaction should be as consistent as possible.

[jack.slocum]

It calls e.preventDefault(); which unfortunately doesn't seem to accomplish anything. Do you have any suggestions of a workaround?

[willydee]

Not really, Jack. My JavaScript knowledge is far from being sufficient ... But since the grid selection model allows multiple selection without any side effects, the fix might be in there ;)

Edit
Just an idea (didn't thought about side effects, though): any tree node is rendered as an <a> tag by default, which might be the cause of this behaviour. In many cases, this might be unnecessary. What about adding a config option to TreeView suppressing the rendering of anchor tags if not needed? And then making this option the default as soon as a multiselection model is bound to the tree.

[willydee]

Jack, did you recognize my addendum to the previous message?

[jack.slocum]

No it didn't appear as new for me.

Without the anchor tag cross browser keyboard nav will be dead. What might be an option is preventing the addition of href="#" in FF and using a Mozilla specific workaround. I will take a look at it in the near future.

[willydee]

Thanks for the information. Good point about keyboard navigation. Since key nav (and even multiselection via keyboard) is possible in gridviews, I thought it would be rather easy to apply that functionality to tree panels, too.

Regarding message notification (and possible miss of information, since the board is growing rapidly), do you think it's possible to configure the vBulletin sending a notification if a message in a subscribed thread is altered? Dunno how much additional traffic this would cause, though.

[Carel]

I added

attr.href = "javascript:void(0)";

in the createNode method et voila.

[mystix]

I added

attr.href = "javascript:void(0)";

in the createNode method et voila.

ooh interesting... i was thinking of that but i never got down to trying it out.
"et voila" = success?

[Footeuz]

Hello/Bonjour,

Great !!!
But where did you add your code ?!!!!!!
Is it directly on the createNode function in ext-all.js or in an override ??????


"et voila" can means "that's done" in french ;)

[Footeuz]

I did what you say but it opens a new empty window

Did you add anything else ???

[Footeuz]

I solve the problem doing like that :

In the ext-all-debug.js I add a function in the TreeNode :

addselect : function(){
var selmodel = this.getOwnerTree().getSelectionModel();
selmodel.selNodes.push(this);
selmodel.selMap[this.id] = this;
selmodel.lastSelNode = this;
this.ui.onSelectedChange(true);
selmodel.fireEvent("selectionchange", selmodel, selmodel.selNodes)
},


and then in the Ext.tree.TreeNodeUI.prototype I modify the onclick function :


onClick : function(e){
if(this.dropping){
e.stopEvent();
return;
}
if(this.fireEvent("beforeclick", this.node, e) !== false){
if(!this.disabled && this.node.attributes.href){
if(!e.ctrlKey){
this.fireEvent("click", this.node, e);
}else {
this.node.addselect();
e.stopEvent();
}
return;
}
e.preventDefault();
if(this.disabled){
return;
}

if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
this.node.toggle();
}

this.fireEvent("click", this.node, e);

}else{
e.stopEvent();
}
},



I have 2 problems.
I should not need to create this function addselect if the function select of the MultiseletionModel works good with his parameters.
I tried

this.node.select(this.node, e, true);
to force the select to keep selected nodes.
But it didn't



And the second problem is to make this changes in an extend.
How can I do ?!
I don't want to modify directly the ext-all.js

[Grimsk]

I added

attr.href = "javascript:void(0)";

in the createNode method et voila.

et voila = didnt work!!

[Grimsk]

i think we cant do anything to prevent this behavior in FF with the "A" tag

is it a good idea to only use a span and do the action of href in javascript?

[Rob_mac]

This fault is still present in the ExtJS Alpha 1 release. Is there any news of a fix?

[paulsk]

This will prevent the default browser events from working:


myTree.on('click', function(node, e) {
node.select();

if (e.ctrlKey || e.shiftKey) {
// Prevent the CTRL or SHIFT keys from performing a browser specific function

//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = false;

//e.stopPropagation works only in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}

return false;
}
}, this);


However, it also prevents the tree selection process from automatically working, although the above event handler could do that.

BTW this bug also occurs in a TreePanel using the DefaultSelectionModel when using a FireFox browser.

[jcfearon]

Does the Core Development / Support team have a timeline for this fix? Thanks!

[tschaub]

I see that e.ctrlKey stops the event in TreeNodeUI. Is there a reason that e.shiftKey doesn't do the same (since preventing the default is not accomplished without it)?

I'm using the patch I suggested here http://extjs.com/forum/showthread.php?p=97412#post97412

I'm not surprised if this creates a problem elsewhere - I just can't see what it would be.

Otherwise, I think "javascript: void 0" is a better href than "#" - but perhaps there is another reason for the hash.