Trigger resize when a Bootstrap tab is shown

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Fixed an issue with plotly graphs sometimes not getting fully removed from the DOM. (#178)
 * Fixed an issue with ipyleaflet erroring out when attempting to read the `.model_id` property of a closed widget object. (#179)
+* Fixed an issue where altair charts would sometimes render to a 0 height after being shown, hidden, and then shown again. (#180)
 
 ## [0.4.2] - 2024-12-18
 

js/src/output.ts

@@ -252,6 +252,18 @@ $(document).on("shiny:disconnected", () => {
   manager.clear_state();
 });
 
+// When in filling layout, some widgets (specifically, altair) incorrectly think their
+// height is 0 after it's shown, hidden, then shown again. As a workaround, trigger a
+// resize event when a tab is shown.
+// TODO: This covers the 95% use case, but it's definitely not an ideal way to handle
+// this situation. A more robust solution would use IntersectionObserver to detect when
+// the widget becomes visible. Or better yet, we'd get altair to handle this situation
+// better.
+// https://github.com/posit-dev/py-shinywidgets/issues/172
+document.addEventListener('shown.bs.tab', event => {
+  window.dispatchEvent(new Event('resize'));
+})
+
 // Our version of https://github.com/jupyter-widgets/widget-cookiecutter/blob/9694718/%7B%7Bcookiecutter.github_project_name%7D%7D/js/lib/extension.js#L8
 function setBaseURL(x: string = '') {
   const base_url = document.querySelector('body').getAttribute('data-base-url');