Tab does not interact well with ipyleaflet Map object

[PROgram52bc]

Description

When an ipyleaflet Map object is placed inside a tab other than the first one, it doesn't get fully rendered, where there are gray areas as illustrated in the screenshot.

I am suspecting this is an issue more related to the Tab widget rather than the Map class, because when I place the map on the first tab, it renders correctly. But it might be a bug with ipyleaflet as well. Let me know what you think!

Reproduce

1. Create a fresh environment, with ipyleaflet and ipywidgets installed.
2. Create a new notebook with the following content

from ipyleaflet import Map
from ipywidgets import Tab, Text
m = Map(center=(0,0), zoom=2)
display(Tab([Text("blah"), m]))

3. Click on the second tab
4. The behavior should be reproduced

Expected behavior

Map should be rendered without gray areas.

Context

• ipywidgets version
• Operating System and version: Ubuntu 18.04
• Browser and version: Chrome Version 96.0.4664.110 (Official Build) (64-bit)

[afonit]

That is a known current issue, as I recall it gets fixed in ipywidgets 8. If I can find the issue/comment I will post a link to it here. I did not find it with a quick search.

As a workaround - if you resize your browser window, make it full screen, then not full screen, the map will display correctly.

Edit:
Here is the comment mentioning ipywidgets 8:
jupyter-widgets/ipyleaflet#904 (comment)

[jasongrout]

Yes, this should be fixed in 8.0. This is a relevant issue: #2762

[PROgram52bc]

As a workaround - if you resize your browser window, make it full screen, then not full screen, the map will display correctly.

Thanks! I am wondering if there is a "programmatic workaround" that doesn't require user interaction?