GridLayout miscalculates the size of an inside table

I would appreciate if someone could give me an idea on how to fix the following issue.

The first attached picture shows a data entry page that has fields inside of a GridLayout. As you can see it contains two custom table components inserted into the GridLayout rows. Each custom table component is a VerticalLayout that contains a Table.



After the user clicks on the “+” icon in the table header, the custom table component adds a field area and OK/Cancel butons to the VerticalLayout as shown on the second attached picture. The outer GridLayout correctly resizes.



Then the user clicks the OK button to add a new row to the table and close the edit area inside of the first custom table component. At this point, I repopulate the table with a new array of objects (all in memory), refresh the table cache and remove the field area and the buttons from the VerticalLayout that will be left only with a Table component. As the third picture illustrates, the outer GridLayout collapses but miscalculates the new size of the first table than now has a new row. You can see the gap between the tables is gone. It gets confused by the combination of the removing the field area and the new table size. Separately, it can process both adding a row and showing/hiding the edit area correctly. When it happens together, the size is miscalculated. It corrects itself next time the page is refreshed.



I have tried different things to fix the issue but no matter what I did inside of the OK button click, the framework still uses the old size of the top table when repaining the collapsed GridLayout and the gap between the tables disappears.

Thank you!
20010.png
20011.png
20012.png