fix(dashboard): chart doesn't resize when tab switch (#22009)

superset-frontend/cypress-base/cypress/integration/dashboard/tabs.test.ts

@@ -22,6 +22,7 @@ import {
   getChartAliasBySpec,
 } from 'cypress/utils';
 import { TABBED_DASHBOARD } from 'cypress/utils/urls';
+import { expandFilterOnLeftPanel } from './utils';
 
 const TREEMAP = { name: 'Treemap', viz: 'treemap' };
 const FILTER_BOX = { name: 'Region Filter', viz: 'filter_box' };
@@ -91,6 +92,7 @@ describe('Dashboard tabs', () => {
     cy.get('@row-level-tabs').last().click();
     waitForChartLoad(LINE_CHART);
     cy.getBySel('grid-container').find('.line').should('be.visible');
+    cy.get('@row-level-tabs').first().click();
   });
 
   it.skip('should send new queries when tab becomes visible', () => {
@@ -166,4 +168,30 @@ describe('Dashboard tabs', () => {
       });
     });
   });
+
+  it('should update size when switch tab', () => {
+    cy.get('@top-level-tabs')
+      .last()
+      .click()
+      .should('have.class', 'ant-tabs-tab-active');
+
+    expandFilterOnLeftPanel();
+
+    cy.wait(1000);
+
+    cy.get('@top-level-tabs')
+      .first()
+      .click()
+      .should('have.class', 'ant-tabs-tab-active');
+
+    cy.wait(1000);
+
+    cy.get("[data-test-viz-type='treemap'] .chart-container").then(
+      $chartContainer => {
+        expect($chartContainer.get(0).scrollWidth).eq(
+          $chartContainer.get(0).offsetWidth,
+        );
+      },
+    );
+  });
 });

superset-frontend/src/dashboard/components/gridComponents/Chart.jsx

@@ -190,7 +190,9 @@ class Chart extends React.Component {
 
       if (
         nextProps.width !== this.props.width ||
-        nextProps.height !== this.props.height
+        nextProps.height !== this.props.height ||
+        nextProps.width !== this.state.width ||
+        nextProps.height !== this.state.height
       ) {
         clearTimeout(this.resizeTimeout);
         this.resizeTimeout = setTimeout(this.resize, RESIZE_TIMEOUT);