Unexpected styling when performing Clickhandler on TreeNode

[hin3x]

We have a TreeGrid where the user can open a subtree with a single click, instead of a double click.
This works fine with a ClickHandler, but we have found that the resulting TreeGrid has different styling classes compared to when clicking on the expansion icon to the left of the folder.

In below testcase, clicking on the expansion icon of node "Two" results in the expected styling classes.
However, when you click on "Two" to expand that folder, some of the html elements within "two" maintain a "treeCellSelectedOver" class, which should be "treeCellSelected" instead.

This seems IE9 only.

Can you look into this please?



final VLayout layout = new VLayout(10);

final TreeGrid moduleTree = new TreeGrid();

moduleTree.setShowEdges(true);

moduleTree.setWidth("200px");
moduleTree.setHeight("200px");
moduleTree.setShowConnectors(false);
moduleTree.setSelectionType(SelectionStyle.SINGLE);
moduleTree.setNodeIcon(null);
moduleTree.setFolderIcon(null);

moduleTree.setShowOpenIcons(true);
moduleTree.setShowDropIcons(true);
moduleTree.setStyleName("treeHomepage");
moduleTree.setBodyStyleName("treeBodyHomepage");
moduleTree.setFastCellUpdates(false);

moduleTree.setCanFocus(false);

moduleTree.addFolderClickHandler(new FolderClickHandler() {
public void onFolderClick(FolderClickEvent event) {
moduleTree.scrollToRow(event.getRecordNum());
if (!event.getViewer().getTree().isOpen(event.getFolder())) {
event.getViewer().getTree().openFolder(event.getFolder());
}
}
});

final Tree tree = new Tree();
tree.setModelType(TreeModelType.PARENT);
tree.setShowRoot(false);

TreeNode one = new TreeNode("one");
one.setIsFolder(false);
one.setID("one");
TreeNode two = new TreeNode("two");
two.setIsFolder(true);
two.setID("two");
TreeNode three = new TreeNode("three");
three.setIsFolder(false);
three.setID("three");

tree.setRoot(one);
tree.add(two, one);
tree.add(three, two);

moduleTree.setData(tree);

layout.addMember(moduleTree);

layout.draw();

[Isomorphic]

Using a specialized style sheet that would immediately reveal such inconsistencies, we tried to reproduce this in IE9 (9.0.8112.16421) on Windows 7 x64 using your sample code and were not successful in either the SGWT 4.0d or SGWT 3.1p branches.

What version are you using?

[hin3x]

Hi,

Sorry for the late reply - we are on v8.3p_2012-11-30/Pro Deployment (built 2012-11-30).

thanks

[Isomorphic]

Are you able to reproduce the issue with the latest nightly build in the 3.1p thread?

If so, can you confirm:
- which Skin? Can you try loading a different skin and see if the problem persists?
- if you clear your browser cache and refresh, does the problem persist?
- Do you have a doctype specified on your bootstrap HTML file? If so, what tag is specified
- Are you loading any other stylesheets on the HTML file?
- Finally what's your exactly browser and OS configuration?

Thanks
Isomorphic Software

[hin3x]

Hi,

I have now run the case with this nights 3.1p build as you asked. I can still reproduce the issue:
- when you load the page, the tree is collapsed
- clicking the + sign opens up the node, showing "three". In this case, the table inside the tr that holds "two" has class "treeCellSelected"
- reload the page, the tree is again collapsed
- clicking on "two", the node upens up and shows "three". In this case however, the table insice the tr that holds "two" now has class "treeCellSelectedOver", It remains that way, even after clicking on "three". Obviously this is incorrect.

This is on IE9 (9.0.8112.16421) on Windows 7 x64.


Thanks for your feedback

[Isomorphic]

As mentioned above, we tried with the same browser you list, on the same OS, and don't see the issue.

Can you answer each of the following please?
- Which Skin is being used? Can you try loading a different skin and see if the problem persists?
- If you clear your browser cache and refresh, does the problem persist?
- Do you have a doctype specified on your bootstrap HTML file? If so, what tag is specified
- Are you loading any other stylesheets on the HTML file?
- Is this a snippet from a bigger app?

Aside from considering the answers to the above questions, all we can do at this point (since we can't seem to reproduce your issue) is to ask for a complete test case:
- a full entry point class
- your HTML page and any style sheets
- the contents of any custom *.gwt.xml files

[hin3x]

Hello,

to reply on your questions:
- Which Skin is being used? Can you try loading a different skin and see if the problem persists?
We used a custom skin. I have modified my reprocase to use the Enterprise skin, and the problem is still there
- If you clear your browser cache and refresh, does the problem persist?
Yes
- Do you have a doctype specified on your bootstrap HTML file? If so, what tag is specified
Yes, I'm using the html5 doctype. However, removing the doctype entirely still shows the issue I'm talking about
- Are you loading any other stylesheets on the HTML file?
No
- Is this a snippet from a bigger app?
No, I have created a separate small application to test this, as always when submitting support requests

To make the issue more obvious, I've cleaned up my reprocase app. Please find below the Reprocase.html file:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript">
var imageLoc = "images/logos/";
var isomorphicDir = "reprocase/sc/";
</script>

<style type="text/css">
td.treeCellSelectedOver { color: orange !important }
</style>
<script type="text/javascript" language="javascript" src="reprocase/reprocase.nocache.js"></script>
</head>

<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>


You can see there is no other css, only a single rule that I have added to demonstrate how the treeCellSelectedOver class is incorrectly set/retained in IE9


In addition, the Reprocase.gwt.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='reprocase'>
<inherits name='com.google.gwt.user.User'/>

<inherits name="com.smartgwtpro.SmartGwtPro"/>
<inherits name="com.smartclient.theme.enterprise.EnterpriseResources"/>
<inherits name="com.smartgwtpro.tools.Tools"/>

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

<entry-point class='be.repro.client.Reprocase'/>

<source path='client'/>
</module>


And finally, the entire entrypoint class, as requested:

package be.repro.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.SelectionStyle;
import com.smartgwt.client.types.TreeModelType;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.tree.Tree;
import com.smartgwt.client.widgets.tree.TreeGrid;
import com.smartgwt.client.widgets.tree.TreeNode;
import com.smartgwt.client.widgets.tree.events.FolderClickEvent;
import com.smartgwt.client.widgets.tree.events.FolderClickHandler;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Reprocase implements EntryPoint {

/**
* This is the entry point method.
*/
public void onModuleLoad() {

final VLayout layout = new VLayout(10);

final TreeGrid moduleTree = new TreeGrid();

moduleTree.setShowEdges(true);

moduleTree.setWidth("200px");
moduleTree.setHeight("200px");
moduleTree.setShowConnectors(false);
moduleTree.setSelectionType(SelectionStyle.SINGLE);
moduleTree.setNodeIcon(null);
moduleTree.setFolderIcon(null);

moduleTree.setShowOpenIcons(true);
moduleTree.setShowDropIcons(true);
moduleTree.setStyleName("treeHomepage");
moduleTree.setBodyStyleName("treeBodyHomepage");
moduleTree.setFastCellUpdates(false);

moduleTree.setCanFocus(false);

moduleTree.addFolderClickHandler(new FolderClickHandler() {
public void onFolderClick(FolderClickEvent event) {
moduleTree.scrollToRow(event.getRecordNum());
if (!event.getViewer().getTree().isOpen(event.getFolder())) {
event.getViewer().getTree().openFolder(event.getFolder());
}
}
});

final Tree tree = new Tree();
tree.setModelType(TreeModelType.PARENT);
tree.setShowRoot(false);

TreeNode one = new TreeNode("one");
one.setIsFolder(false);
one.setID("one");
TreeNode two = new TreeNode("two");
two.setIsFolder(true);
two.setID("two");
TreeNode three = new TreeNode("three");
three.setIsFolder(false);
three.setID("three");

tree.setRoot(one);
tree.add(two, one);
tree.add(three, two);

moduleTree.setData(tree);

layout.addMember(moduleTree);

Button dev = new Button("Show devconsole");
dev.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
com.smartgwtpro.tools.client.SCPRO.openDataSourceConsole();
}
});
layout.addMember(dev);

layout.draw();

}

public static native void log(String msg) /*-{
console.log(msg);
}-*/;

}


Thank you for checking this out.

[Isomorphic]

OK, it appears the issue is triggered by the doctype, which forces IE9 into standards mode. We'll investigate what's going on and update this thread when we find a solution (perhaps early next week).

If you need a workaround, ticking "compatibility view" under tools appears to solve this issue.

[Isomorphic]

We have checked a fix into the SC 8.3p/SGWT 3.1p and SC 9.0d/SGWT 4.0d branches to address this behavior, which should be in the next nightly builds.