Highlighting of composite tree items is broken in Firefox

[dankurka]

Originally reported on Google Code with ID 1372

Found in GWT Release: 1.4.10

Detailed description: When you select a tree item, it gets highlighted by
default, with a blue background. This works fine in GWT shell and in
Firefox. However, when you set the tree item to display a widget instead of
a simple text label, the highlighting is broken in Firefox but still works
in GWT shell.

The widget we use as a tree item is a Composite with this structure:

        final FlexTable popupFlexTable = new FlexTable();
        initWidget(popupFlexTable);
        popupFlexTable.setSize("100%", "100%");

        final Image image = new Image();
        popupFlexTable.setWidget(0, 0, image);
        image.setUrl(getImageUrl(noeudInfo));

        final Label NoeudLabel = new Label(getLibelle(noeudInfo));
        popupFlexTable.setWidget(0, 1, NoeudLabel);

Workaround if you have one:

None yet.

Reported by jlouvel on 2007-07-13 12:44:34

[dankurka]

Environment: Windows XP Pro SP2, Firefox 2.0.0.4

Reported by jlouvel on 2007-07-13 14:27:15

[dankurka]

I couldn't reproduce this, so I think it might have something to do with your CSS. 
Switching from text to a widget alters the DOM tree;  please double-check that your
CSS selectors match the new DOM structure.  If the problem still exists, please
attach code demonstrating the problem.

Reported by gwt.team.sumit on 2007-07-20 01:44:17

• Status changed: NeedsInfo

[dankurka]

Reported by gwt.team.sumit on 2007-07-20 01:44:33

• Labels added: Category-UI

[dankurka]

Thanks for looking at this issue. I've attached a simple test case that reproduces
the issue.

Reported by jlouvel on 2007-07-20 15:14:54

---

• Attachment: DeskTest.java
• Attachment: Node.java

[dankurka]

Reported by bruce+personal@google.com on 2008-10-21 21:58:15

• Labels removed: priority-medium

[dankurka]

If you are still experiencing this issue with the latest version of GWT, can you
update the issue tracker?  Thanks.

Reported by acc%google.com@gtempaccount.com on 2008-12-12 01:01:23

[dankurka]

I encounter the same symptom with GWT 1.7.0 and FF 3.5.1.
The issue seems to be originated at the following statement in
initializeClonableElements method of TreeItem class:
DOM.setStyleAttribute(contentElem, "display", "inline"); 

It does make sense if the TreeItem is just plain text. However, when the TreeItem is
widget, set display CSS style to inline does not make sense. As matter of fact, when
I change from "inline" to "block" by using FireBug, the highlight appears as expected.

The host mode does not have this problem as well as the web mode on IE.
The web mode on FF repro this issue.

Attached GwtTreeTest.java for your convenience. Compile it and execute on FF. 
Repro steps: On FF, 
1. Open the "text branch 0" tree item under the "Inline text tree items:" label.
2. Click on the "text contents 0". It is highlighted. You can move the highlight by
pressing up or down arrow key.
3. Open the "widget branch 0" tree item under the "Widget (block) tree items:" label.
4. Click on the "widget contents 0". It's not highlighted.
5. On FireBug, change the display CSS style value of the corresponding div tag from
"inline" to "block". The highlight appears.

Reported by artymt on 2009-08-15 07:51:44

---

• Attachment: GwtTreeTest.java

[dankurka]

Obviously I'd like this issue to be fixed and that's why I'm here, but at least the
status of this issue should change.  By the way, this is a screenshot of how this bug
looks like:

http://www.flickr.com/photos/mentecatos/3881652303/

And you can also replicate it with this code (remember that you can only see the
problem in firefox, or chrome actually):

public class TreeItemWidget implements EntryPoint {
   public void onModuleLoad() {
      Tree tree = new Tree();
      TreeItem mainTreeItem = tree.addItem("Main Tree Item");
      mainTreeItem.addItem("My text option");
      mainTreeItem.setState(true);
      HorizontalPanel container = new HorizontalPanel();
      container.setSpacing(2);
      container.add(new Label("My widget option"));
      container.add(new Image(GWT.getModuleBaseURL() + "closeIcon.png"));
      mainTreeItem.addItem(container);
      RootPanel.get().add(tree);
   }
}

Reported by rogelio.flores on 2009-09-02 20:25:16

[dankurka]

Here's a workaround using the information provided by artymt (which I verified as
well using Firebug).  Using the code in my previous example, just do this:

TreeItem newTreeItem = mainTreeItem.addItem(container);
newTreeItem.getElement().getFirstChildElement().setAttribute("style","display: block;");

Reported by rogelio.flores on 2009-09-03 21:24:13

[dankurka]

I've run into this same problem, using TreeItems with either a HTML widget or a 
composite widget (internally using a Label). Highlighting didn't work on Firefox 
(3.0.13), Safari (4.0.3) or Chrome (3.0.195.21), all on Win XP SP3, however it did
work 
for IE 8.

The workaround in Comment 9 seems to have fixed things for me, although would be good

if Google could fix this in GWT.

Reported by shawn.haggett@internode.on.net on 2009-09-24 05:55:02

[dankurka]

The crux of the issue seems to be that TreeItem div element has display: inline
style, whereas a Label or a more complex child by default doesn't. If the style of
the child is set to display: inline also, the background shows through, but for
children with display: block the background is white in Firefox 3.5.3. In IE8,
display: block element shows the background of its parent element even if the parent
has display: inline. Safari 4.0.3 behaves the same as Firefox.

The static test page at http://www.laurinolli.fi/~tazle/test-inline.html shows this
issue.

Reported by tlaurinolli on 2009-10-14 16:18:42

[dankurka]

I filed a bug on Firefox to find out if they think this is bug or intended behaviour,
and in the process noticed that both Opera and Safari also exhibit the same error.
The bug report is at https://bugzilla.mozilla.org/show_bug.cgi?id=522279 and it was
promptly filed as INVALID.

I hope this all the information required so that this issue can be fixed in GWT.

Reported by tlaurinolli on 2009-10-14 22:07:59

[dankurka]

This continues to be an issue with GWT 2.0.0 and FireFox 3.6.2

Reported by KarlScubaMan on 2010-07-02 17:38:50

[dankurka]

Same issue with GWT 2.1.1 and Chrome 9.0.597.98

Reported by omasseau on 2011-02-17 13:00:43

[dankurka]

This workaround worked for me:

I've added in my css file :

.gwt-Tree .gwt-TreeItem-selected  {
  display: table !important;
}

Reported by omasseau on 2011-03-03 16:26:58

[dankurka]

Had the same issue in IE8. The workaround

treeItem.getElement().getFirstChildElement().setAttribute("style", "display: block;")

was working for us in Firefox, but not in IE8. I found that using:

DOM.setStyleAttribute((Element)treeItem.getElement().getFirstChildElement(), "display",
"block")

worked in both browsers.

Not sure why this is still "needs info", I don't think there is much more info you
can give! I suppose the fact that CellTree is now in there has pushed support for the
"old" tree back a notch...

Reported by AndrewScully on 2011-03-23 16:07:14

[dankurka]

Reported by kurka.daniel on 2012-12-16 10:52:55

• Status changed: AssumedStale

[dankurka]

Still a problem in GWT 2.5. 
Duplicate of issue 3801.
http://code.google.com/p/google-web-toolkit/issues/detail?id=3800

Reported by gunnar.gunnarsson@abc.se on 2013-02-21 09:51:20

[dankurka]

Reported by kurka.daniel on 2013-02-21 10:11:44

• Status changed: Duplicate
• Merged into: #3801