View.invalidate_layout causes issue with dynamic tabs

Panel
1

Hi,
A while back I asked a query here React with bokeh extension related to rendering react with bokeh. To ensure that the layout is correctly formed after rendering, it was suggested to use view.invalidate_layout for my use case.

While this has been working perfectly, we have ran into an issue with this solution when using dynamic tabs.

import panel.widgets as pnw
slider  = pnw.IntSlider(value=10, start=1, end=60)


from panel.reactive import ReactiveHTML

class Test(ReactiveHTML):
    
    _template = "<div id='element'></div>"

    _scripts = {
        'render': """
        setTimeout(() => {
            element.innerHTML = '<div style="width: 500px; height: 500px; background-color: red"></div>'
            view.invalidate_layout()
        }, 1000)        
        """
    }

t1 = Test()
t2 = Test()
t3 = Test()
t4 = Test()


pn.Tabs(
    ("Chart 1", t1),
    ("Chart 2", t2),
    ("Chart 3", t3),
    ("Chart 4", t4),
    dynamic=True,
)

Here when you change tabs, it seems like the previous tabs disappear for some reason. Is there a workaround to this?

Would be happy to go through the code and raise a patch as well if I can get some starting points to look into.

I am using panel 0.12.4 and bokeh 2.4.2.

Thanks a lot.

2

Not sure if it will help but try to update panel to the latest version.