diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/index.tsx b/superset-frontend/src/explore/components/ExploreChartPanel/index.tsx index 82aee5bdcb5..d7393a0f99e 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel/index.tsx +++ b/superset-frontend/src/explore/components/ExploreChartPanel/index.tsx @@ -204,7 +204,6 @@ const ExploreChartPanel = ({ const { ref: chartPanelRef, - observerRef: resizeObserverRef, width: chartPanelWidth, height: chartPanelHeight, } = useResizeDetectorByObserver(); @@ -378,7 +377,6 @@ const ExploreChartPanel = ({ flex-direction: column; padding-top: ${theme.sizeUnit * 2}px; `} - ref={resizeObserverRef} > {vizTypeNeedsDataset && ( ), [ - resizeObserverRef, showAlertBanner, errorMessage, onQuery, @@ -533,7 +530,7 @@ const ExploreChartPanel = ({ document.body.className += ` ${standaloneClass}`; } return ( -
+
{standaloneChartBody}
); diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts b/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts index 04ae6c1a2f4..908fec4c4dc 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts +++ b/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts @@ -31,15 +31,16 @@ export default function useResizeDetectorByObserver() { setChartPanelSize({ width, height }); } }, []); - const { ref: observerRef } = useResizeDetector({ + // Use targetRef to observe the same element we measure + useResizeDetector({ refreshMode: 'debounce', refreshRate: 300, onResize, + targetRef: ref, }); return { ref, - observerRef, width, height, };