From 47cf57f5a0744c0b59e3b884fb6db58bf959b7d3 Mon Sep 17 00:00:00 2001
From: Ajay M <ajay.m@outlook.com>
Date: Wed, 5 May 2021 16:30:10 -0400
Subject: [PATCH] fix(dashboard): Prevent char overflow when displaying chart
 description (#14467)

* Force refresh the chart on toggle display description

* Use forceUpdate instead of forceRefresh

* Instead of forceUpdate, add a state for desciption height

Co-authored-by: Ajay Mancheery <ajaymancheery@Ajays-MacBook-Pro.local>
---
 .../components/gridComponents/Chart.jsx       | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
index bc1f78f7df17..59a6c897e602 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
@@ -101,6 +101,7 @@ export default class Chart extends React.Component {
     this.state = {
       width: props.width,
       height: props.height,
+      descriptionHeight: 0,
     };
 
     this.changeFilter = this.changeFilter.bind(this);
@@ -120,7 +121,8 @@ export default class Chart extends React.Component {
     // which improves performance significantly
     if (
       nextState.width !== this.state.width ||
-      nextState.height !== this.state.height
+      nextState.height !== this.state.height ||
+      nextState.descriptionHeight !== this.state.descriptionHeight
     ) {
       return true;
     }
@@ -164,14 +166,20 @@ export default class Chart extends React.Component {
     clearTimeout(this.resizeTimeout);
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.isExpanded !== prevProps.isExpanded) {
+      const descriptionHeight =
+        this.props.isExpanded && this.descriptionRef
+          ? this.descriptionRef.offsetHeight
+          : 0;
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({ descriptionHeight });
+    }
+  }
+
   getChartHeight() {
     const headerHeight = this.getHeaderHeight();
-    const descriptionHeight =
-      this.props.isExpanded && this.descriptionRef
-        ? this.descriptionRef.offsetHeight
-        : 0;
-
-    return this.state.height - headerHeight - descriptionHeight;
+    return this.state.height - headerHeight - this.state.descriptionHeight;
   }
 
   getHeaderHeight() {