Grid loses styles, missing data

I have a Grid that I create once, then setItems multiple times. The grid had styling added and after a couple of setItems, the grid blows up and all styling is removed and no data is displayed. I haven’t been able to track it down to a single cause. Has anyone experienced this?

suggestedItems = new ArrayList<Item>();
suggestionGrid = new SuggestionGrid();
...
private class SuggestionGrid extends Grid<Item> {
    public SuggestionGrid() {
        addStyleName(MyTheme.POSITION_ABSOLUTE);
        addStyleName(MyTheme.Z_INDEX_1000);
        addStyleName(MyTheme.MARGIN_TOP);
    }
...
}
private void updateSuggestions(List<Item> suggestedItems){
    suggestionGrid.setItems(suggestedItems);
}
private void hideSuggestions() {
    suggestedItems.clear();
    suggestionGrid.setItems(suggestedItems);
    suggestionGrid.setVisible(false);
}

35104.gif

Starting to do some debugging and added some logging. Apparently the server-side component thinks it has the styles set, however the client does not.

logger.warn("Before set items: " + suggestionGrid.getStyleName());
...
  1. logger - Before set items: position-absolute z-index-1000 margin-top
  2. logger - After set items: position-absolute z-index-1000 margin-top


Rendered HTML

[code]

[/code]Grid contains data/rows


Typed more letters into search:

  1. logger - Before set items: position-absolute z-index-1000 margin-top
  2. logger - After set items: position-absolute z-index-1000 margin-top


Rendered HTML

[code]

[/code]Grid no longer contains data/rows, even though data source has items


Typed more letters into search:

  1. logger - Before set items: position-absolute z-index-1000 margin-top
  2. logger - After set items: position-absolute z-index-1000 margin-top


Rendered HTML

[code]

[/code]Grid no longer contains data/rows, even though data source has items

Update:
Actual log files show something might be happening while in a thread. The ui does not blow up until the last two print ‘http-nio-8080-exec-52’

2017-09-05/04:32:04.666/GMT [Thread-154] WARN my.app.SuggestComponent - After set items: position-absolute z-index-1000 margin-top 2017-09-05/04:32:05.721/GMT [Thread-155] WARN my.app.SuggestComponent - Before set items: position-absolute z-index-1000 margin-top 2017-09-05/04:32:05.722/GMT [Thread-155] WARN my.app.SuggestComponent - After set items: position-absolute z-index-1000 margin-top 2017-09-05/04:32:05.723/GMT [Thread-155] WARN my.app.SuggestComponent - Before set items: position-absolute z-index-1000 margin-top 2017-09-05/04:32:05.723/GMT [Thread-155] WARN my.app.SuggestComponent - After set height: position-absolute z-index-1000 margin-top 2017-09-05/04:32:05.723/GMT [Thread-155] WARN my.app.SuggestComponent - Before set items: position-absolute z-index-1000 margin-top 2017-09-05/04:32:07.289/GMT [http-nio-8080-exec-52] WARN my.app.SuggestComponent - Before set items: position-absolute z-index-1000 margin-top 2017-09-05/04:32:07.290/GMT [http-nio-8080-exec-52] WARN my.app.SuggestComponent - Before set items: position-absolute z-index-1000 margin-top For the start of each thread, I get the UI

UI ui = UI.getCurrent(); new SuggestThread(searchText, ui).start(); (I also tried getUI()). Then the thread updates the UI using

ui.access(()->showSuggestions(entityList));

I’ve enabled superdevmode and here is what I see in the Chrome console, if it helps any.

vaadinPush.debug.js?v=8.1.2:1196 WebSocket connection to 'ws://localhost:8080/myapp/PUSH?v-uiId=6&v-pushId=36db97c5-3a50-4f9b-ab42-3dc610edf38c&X-Atmosphere-tracking-id=0&X-Atmosphere-Framework=2.3.2.vaadin1-javascript&X-Atmosphere-Transport=websocket&X-Atmosphere-TrackMessageSize=true&Content-Type=application/json;%20charset=UTF-8&X-atmo-protocol=true' failed: Error during WebSocket handshake: Unexpected response code: 200
_getWebSocket @ vaadinPush.debug.js?v=8.1.2:1196
_executeWebSocket @ vaadinPush.debug.js?v=8.1.2:1382
_execute @ vaadinPush.debug.js?v=8.1.2:652
AtmosphereRequest.execute @ vaadinPush.debug.js?v=8.1.2:2918
atmosphere.subscribe @ vaadinPush.debug.js?v=8.1.2:2980
one_g$ @ AtmospherePushConnection.java:556
lne_g$ @ AtmospherePushConnection.java:220
_ne_g$ @ AtmospherePushConnection.java:198
DK_g$ @ SchedulerImpl.java:50
hK_g$ @ SchedulerImpl.java:183
cK_g$ @ SchedulerImpl.java:347
vK_g$ @ SchedulerImpl.java:78
_J_g$ @ SchedulerImpl.java:141
OI_g$ @ Impl.java:239
RI_g$ @ Impl.java:291
(anonymous) @ Impl.java:77
callback_0_g$ @ SchedulerImpl.java:196
ConsoleLogger.java:32 Error updating connector hierarchy
QWn_g$ @ ConsoleLogger.java:32
Zqn_g$ @ SimpleConsoleLogHandler.java:36
lqn_g$ @ Logger.java:312
kqn_g$ @ Logger.java:302
Iqn_g$ @ Logger.java:236
fte_g$ @ MessageHandler.java:1337
ete_g$ @ MessageHandler.java:1150
Wse_g$ @ MessageHandler.java:471
kWd_g$ @ ApplicationConfiguration.java:662
sse_g$ @ MessageHandler.java:1501
tse_g$ @ MessageHandler.java:246
Fne_g$ @ AtmospherePushConnection.java:378
(anonymous) @ AtmospherePushConnection.java:538
OI_g$ @ Impl.java:239
RI_g$ @ Impl.java:291
(anonymous) @ Impl.java:77
_f @ vaadinPush.debug.js?v=8.1.2:2765
_invokeFunction @ vaadinPush.debug.js?v=8.1.2:2754
_invokeCallback @ vaadinPush.debug.js?v=8.1.2:2884
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2111
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_execute @ vaadinPush.debug.js?v=8.1.2:645
_reconnectWithFallbackTransport @ vaadinPush.debug.js?v=8.1.2:1752
_websocket.onclose @ vaadinPush.debug.js?v=8.1.2:1541
ConsoleLogger.java:55 Exception: com.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property 'getRenderer_0_g$' of undefined
ConsoleLogger.java:32 Error sending state change events
QWn_g$ @ ConsoleLogger.java:32
Zqn_g$ @ SimpleConsoleLogHandler.java:36
lqn_g$ @ Logger.java:312
kqn_g$ @ Logger.java:302
Iqn_g$ @ Logger.java:236
bte_g$ @ MessageHandler.java:766
Wse_g$ @ MessageHandler.java:484
kWd_g$ @ ApplicationConfiguration.java:662
sse_g$ @ MessageHandler.java:1501
tse_g$ @ MessageHandler.java:246
Fne_g$ @ AtmospherePushConnection.java:378
(anonymous) @ AtmospherePushConnection.java:538
OI_g$ @ Impl.java:239
RI_g$ @ Impl.java:291
(anonymous) @ Impl.java:77
_f @ vaadinPush.debug.js?v=8.1.2:2765
_invokeFunction @ vaadinPush.debug.js?v=8.1.2:2754
_invokeCallback @ vaadinPush.debug.js?v=8.1.2:2884
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2111
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_execute @ vaadinPush.debug.js?v=8.1.2:645
_reconnectWithFallbackTransport @ vaadinPush.debug.js?v=8.1.2:1752
_websocket.onclose @ vaadinPush.debug.js?v=8.1.2:1541
ConsoleLogger.java:55 Exception: com.google.gwt.event.shared.UmbrellaException: Exception caught: (TypeError) : Cannot read property 'isEditorActive_0_g$' of undefined
ConsoleLogger.java:32 Error sending state change events
QWn_g$ @ ConsoleLogger.java:32
Zqn_g$ @ SimpleConsoleLogHandler.java:36
lqn_g$ @ Logger.java:312
kqn_g$ @ Logger.java:302
Iqn_g$ @ Logger.java:236
bte_g$ @ MessageHandler.java:766
Wse_g$ @ MessageHandler.java:484
kWd_g$ @ ApplicationConfiguration.java:662
sse_g$ @ MessageHandler.java:1501
tse_g$ @ MessageHandler.java:246
Fne_g$ @ AtmospherePushConnection.java:378
(anonymous) @ AtmospherePushConnection.java:538
OI_g$ @ Impl.java:239
RI_g$ @ Impl.java:291
(anonymous) @ Impl.java:77
_f @ vaadinPush.debug.js?v=8.1.2:2765
_invokeFunction @ vaadinPush.debug.js?v=8.1.2:2754
_invokeCallback @ vaadinPush.debug.js?v=8.1.2:2884
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2111
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_execute @ vaadinPush.debug.js?v=8.1.2:645
_reconnectWithFallbackTransport @ vaadinPush.debug.js?v=8.1.2:1752
_websocket.onclose @ vaadinPush.debug.js?v=8.1.2:1541
ConsoleLogger.java:55 Exception: com.google.gwt.event.shared.UmbrellaException: Exception caught: (TypeError) : Cannot read property 'setHeaderCaption_0_g$' of undefined
ConsoleLogger.java:32 Error sending state change events
QWn_g$ @ ConsoleLogger.java:32
Zqn_g$ @ SimpleConsoleLogHandler.java:36
lqn_g$ @ Logger.java:312
kqn_g$ @ Logger.java:302
Iqn_g$ @ Logger.java:236
bte_g$ @ MessageHandler.java:766
Wse_g$ @ MessageHandler.java:484
kWd_g$ @ ApplicationConfiguration.java:662
sse_g$ @ MessageHandler.java:1501
tse_g$ @ MessageHandler.java:246
Fne_g$ @ AtmospherePushConnection.java:378
(anonymous) @ AtmospherePushConnection.java:538
OI_g$ @ Impl.java:239
RI_g$ @ Impl.java:291
(anonymous) @ Impl.java:77
_f @ vaadinPush.debug.js?v=8.1.2:2765
_invokeFunction @ vaadinPush.debug.js?v=8.1.2:2754
_invokeCallback @ vaadinPush.debug.js?v=8.1.2:2884
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2111
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_execute @ vaadinPush.debug.js?v=8.1.2:645
_reconnectWithFallbackTransport @ vaadinPush.debug.js?v=8.1.2:1752
_websocket.onclose @ vaadinPush.debug.js?v=8.1.2:1541
ConsoleLogger.java:55 Exception: com.google.gwt.event.shared.UmbrellaException: Exception caught: (TypeError) : Cannot read property 'setHeaderCaption_0_g$' of undefined
ConsoleLogger.java:32 Error sending state change events
QWn_g$ @ ConsoleLogger.java:32
Zqn_g$ @ SimpleConsoleLogHandler.java:36
lqn_g$ @ Logger.java:312
kqn_g$ @ Logger.java:302
Iqn_g$ @ Logger.java:236
bte_g$ @ MessageHandler.java:766
Wse_g$ @ MessageHandler.java:484
kWd_g$ @ ApplicationConfiguration.java:662
sse_g$ @ MessageHandler.java:1501
tse_g$ @ MessageHandler.java:246
Fne_g$ @ AtmospherePushConnection.java:378
(anonymous) @ AtmospherePushConnection.java:538
OI_g$ @ Impl.java:239
RI_g$ @ Impl.java:291
(anonymous) @ Impl.java:77
_f @ vaadinPush.debug.js?v=8.1.2:2765
_invokeFunction @ vaadinPush.debug.js?v=8.1.2:2754
_invokeCallback @ vaadinPush.debug.js?v=8.1.2:2884
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2111
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_reconnect @ vaadinPush.debug.js?v=8.1.2:2233
ajaxRequest.onreadystatechange @ vaadinPush.debug.js?v=8.1.2:2107
XMLHttpRequest.send (async)
_executeRequest @ vaadinPush.debug.js?v=8.1.2:2124
_execute @ vaadinPush.debug.js?v=8.1.2:645
_reconnectWithFallbackTransport @ vaadinPush.debug.js?v=8.1.2:1752
_websocket.onclose @ vaadinPush.debug.js?v=8.1.2:1541
ConsoleLogger.java:55 Exception: com.google.gwt.event.shared.UmbrellaException: Exception caught: (TypeError) : Cannot read property 'setHeaderCaption_0_g$' of undefined

I have confirmed this issue exists in versions 8.1.2, 8.1.1, 8.1.0.
The issue is not present in 8.0.6 ← this was the last 8.0.x version I was using before updating to 8.1.1

Just for fun (midight in PST), I will update to 8.1.3 to see if I can reproduce there too.
Edit: issue can be reproduced in 8.1.3

so I’ve tracked it down to a setVisible on the grid while in a thread. The only work-around for me was to not use setVisible when hiding the grid, but instead add and remove a style ‘hidden’. The css woulbe be the following:

.hidden {
    visibility:hidden;
}

fyi, display:none messed with the height of the component and it was alway just a few pixels.

To get more info or follow the ticker, click here

https://github.com/vaadin/framework/issues/9905

I’m not sure if this applies directly, but at least Vaadin 7 Grid used to not like swapping data sources many times. Have you tried updating the DataProvider instead of overriding the items in the Grid? You can either create a ListDataProvider explicitly or cast the default provider (created by setItems) to ListDataProvider.

-Olli

What I can tell you is that it does not happen immediately, but only after the 3rd or so update. It varies so it looks like some timing / updated issue while in a thread. If I do not toggle the visiblity, keep visible, then the it works. Only when the visibility is toggled is when the issue happens.

I will try to put together a simple test case based on my code.

I’ve added a sample app that produces the same issue:

https://github.com/vaadin/framework/issues/9905#issuecomment-327292311

Great, thank you, that helps a lot!

-Olli