Refresh data provider on hidden grid and set grid visible throws client side exceptions

[samulivaadin]

Consider that Grid is initially setVisible(false);
Then for example search text field attempts to populate data provider with values and calls setVisible(true). Result is that (with Chrome at least) client side exception ensues.

Uncaught TypeError: Cannot read property 'updateSize' of undefined at Object.eval (eval at ft (client-BF4676DDAFDA5E40AE93EFEB692AAAD5.cache.js:971), <anonymous>:3:15) at ft (client-BF4676DDAFDA5E40AE93EFEB692AAAD5.cache.js:971) at et (client-BF4676DDAFDA5E40AE93EFEB692AAAD5.cache.js:926) at ct (client-BF4676DDAFDA5E40AE93EFEB692AAAD5.cache.js:555) at Mq (client-BF4676DDAFDA5E40AE93EFEB692AAAD5.cache.js:475) at fr.gr [as W] (client-BF4676DDAFDA5E40AE93EFEB692AAAD5.cache.js:978) at Yz (client-BF4676DDAFDA5E40AE93EFEB692AAAD5.cache.js:861)

Attached example project that demonstrates this. Based on starter project and Vaadin 10.0.2. See CategoriesList.java

gridfail.zip

[pekam]

Some additional notes:

• This is caused by trying to call client-side methods of gridConnector.js before it has been initialized.
• This happens only if refreshing the dataprovider and setting the grid visible is done during the same server-roundtrip. So, if you for example click one button to dataProvider.refreshAll(), and then click another button to grid.setVisible(true), the bug doesn't occur.
• This doesn't happen if the grid has already been visible before.

[denis-anisimov]

The problem is in the JS execution order.
Initially invisible element is not bound to the DOM and its JS execution is postponed until it becomes bound.
As a result lazyInit JS is not executed once Grid is created but is deferred.
Grid refresh request is also JS execution which is executed after the message processing but it happens before lazyInit execution.
As a result the order is incorrect and it causes the bug.

I moved the JS execution requested from the server side in the very end of browser event loop.
It allows to execute all current JS requests always in the very end. So all previously deferred JS execution requests have a chance to be executed before all currently incoming requests.

The bug is caused two factors in the current design:

• General JS execution which happens always in the very end of message processing regardless of the real order on the server side.
• Deferred binding for initially invisible element.

Such situation never happens for element which initially has been visible regardless of its current state.