Double Icons in list grid header context menu

Version: SmartClient Version: SNAPSHOT_v8.3d_2012-10-11/LGPL Development Only (built 2012-10-11)

Browser: IE9, Firefox, Chrome

I'm running into a strange interaction in my app. I've attached screen shots and DOM's to show what is happening.

I do the following:

1. Bring up my page and right-click on the grid header and get the standard context menu (everything looks fine - see the "good" version of the PNG attached). To cause the problem the context menu MUST be brought up once BEFORE step 2.

2. Click on a tool on my toolbar that launches a "dialog" (it is actually a highly customized window object that contains many layers of controls).

3. Inside the control, click on an item that is an IPickTreeItem inside a DynamicForm (the item has values in the tree, doesn't seem to matter what they are).

4. Close the dialog/window (you do not need to do anything else while in the dialog - you don't even need to select an item from the IPickTreeItem, you just need to click on it so it drops down).

5. Right click on the grid header again to display the context menu (the one that displays shows all of the icons on the menu items twice - see the attached "bad" PNG file).

The attached txt files are what the related part of the DOM looks like. Notice that in the highlighted section (bracked by a comment line in the txt file) that the item does indeed have two icons. In addition, the second icon has a very strange width (says 73 even though it is visually the same size as the first one which is 24). Also notice that the order of the other items in the table row are mixed up in order).

I have tried producing smaller standalone examples that demostrate this, but with no success. Any idea how this code happen or what I can do to fix this problem? Seems like something related to dropping down the IPickTreeItem is corrupting the DOM!

P.S. I also have other context menus on my page and any that have been previously displayed get corrupted also (any that have not been rendered yet are fine when you bring them up).

[Isomorphic]

A Menu is a ListGrid and has fields like ListGrid.fields. This DOM looks like what would happen if some attempted customization of the Menu.fields caused the icon field to be included twice. Ring a bell?

Also, is this really happening on all the browsers you list?

There is no customization of this menu going on. In fact the menu is the standard context menu provide by the ListGrid. I am not accessing it directly in any way. When you refer to Menu.fields are you talking about some static on the Menu class or are you refering to actually accessing and manipulating the actual Menu and MenuItem instances for the particular context menu? If you mean the instances, then I am definitely not accessing or manipulating the Menu or MenuItem instances for the built-in ListsGrid context menu.

Yes, this happens in all three browsers.

So, any ideas on how to track this down? I've spent hours on it so far with no luck.

I really don't see how I could do anything accidentally in my code that would cause just opening the dropdown to double all of the icons on all of the context menus (that have been previously displayed) on the page at the same time. Especially since I do not have any custom handlers for acting on the dropdown other than 'item clicked' (which isn't being executed) and have no references to the grid context menu or its menu items.

Seems like there must be something going on under the covers.

[Isomorphic]

A Menu inherits ListGrid.setFields() and can have its fields configured via this method, via setDefaultProperties(), or via JavaScript in the skin.

It would likewise by possible to create a bizarre effect like this if you did similar customizations on the superclass (ListGrid).

Finally if you've got a third party library that installs some native JavaScript you might be able to get an effect like this.

Rigt now you're the only report we've had of this - we'll need to wait for more info unless you can put together a reproducible case.

None of those cases ring any bells. I am not setting any default properties or overriding anything like this in the skin and the Menu is built and managed by your code (this is the default grid context menu) not mine.

Any diagnostics areas I can turn on or use to get some insight into what is going on?

[Isomorphic]

If you want to dig into it, you might try to figure out the exact moment when Menu.fields acquires a duplicate icon field. Or just remove code until you have a test case we can run.

How do I get access to the grid header's context menu to look at its Menu.fields?

Also, how does it get "more than one" icon? The menu item interface has a simple "setIcon" method. Seems like it can only have one at a time. How would I tell if it had two?

Never mind... since it affects all context menus simultaneously I'll just watch one of my own context menus to see when it gets corrupted.

OK - here's more info.

At the point in time when the context menu is displaying on the screen incorrectly (i.e., the DOM shows that each row has 4 elements with class values of menuIconField, menuIconField, menu, and menuTitleField), the Menu.fields object on the instance of the context menu in memory (inspected using the debugger at run-time) shows that there are 4 ListGridFields in the menu. The four fields have the following field names: icon, title, keys, submenu.

So, it appears to me that there is actually nothing at all wrong with the menu/field objects and this appears to be completely isolated to how the DOM is being rendered from this data. I still don't see how my code could possibly cause this behaviour without there being a defect in either the SmartGWT or GWT layers (I don't know which one does the rendering).

Any ideas on what could cause the code that builds the HTML to behave like this to help me narrow down a smaller example for you?

[Isomorphic]

With this still happening to just you, the most plausible cause remains some kind of third-party JavaScript, or perhaps third-party GWT libraries that have bugs that cause them to mess with the SmartGWT-generated DOM.

You never mentioned if that's possibly the case in your project, but the first thing we'd do in narrowing down the cause is to eliminate anything like that, even seemingly innocuous libraries or calls to core GWT methods like History (anything that might touch the DOM).

My code does not use any third-party GWT libraries besides SmartGWT.

I've attached a modified copy of ContextMenuSample.java from the Showcase that demonstrates the problem.

To reproduce:
1. Start the "Context Menus" sample.
2. Right click on the image to bring up the context menu.
3. Select the last menu item called "defect".
4. Right click on the form in the window that appears (the yellow area). Notice the form context menu displays with a single image before each menu item.
5. Click on the dropdown in the form (where it says "Choose a value").
6. Right click on the form (the yellow area) again. Notice the form context menu displays with double images before each menu item.

I've tracked it down enough to know that it has something to do with the fact that on the context menu (called testMenu in the code) we have a call to addVisibilityChangedHandler and the implementation does a call to markForRedraw on the context menu itself. I'm currently not certain why someone on my team did this and I will not be able to follow up until Monday. We may be able to remove this and not get into this situation, but the behavior still seems erroneous (especially since in our app this context menu is on a ListGrid and this not only effects the context menu we added to the grid, but also messes up the default grid header context menu as well - if it has previously been rendered).

[Isomorphic]

Wow, very surprised to see a repro case this simple. OK we'll take a look and see if it happens for us.

[Isomorphic]

We have attempted to reproduce this problem with your test case with no success.
We are testing against the lastest 3.1 / 8.3 branch code - if you haven't already we'd recommend re-testing with the latest nightly build (and be sure to clear all cache's etc to ensure there's no stale code around).

If you still get the error, see if you can pin down anything that might make it difficult for us to reproduce... Is it intermittent? Is it specific to a particular browser/OS combination or does it occur for all browsers? Do you get the bug in compiled mode as well as in development mode? Are there any subtle steps ommitted in the "to reproduce" steps from the previous post? Etc.