fix(dashboard): Fix hover labels for horizontal overflow native filte…

…r dividers (#22210) Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
apache · Nov 28, 2022 · 93158ea · 93158ea
1 parent 4b96474
commit 93158ea
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/...nd/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx b/...nd/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx
@@ -59,6 +59,7 @@ test('horizontal mode, title', () => {
       orientation={FilterBarOrientation.HORIZONTAL}
       title={SAMPLE_TITLE}
       description=""
+      overflow
     />,
   );
 
@@ -88,9 +89,7 @@ test('horizontal mode, title and description', async () => {
   const descriptionIcon = screen.getByTestId('divider-description-icon');
   expect(descriptionIcon).toBeVisible();
   userEvent.hover(descriptionIcon);
-  const tooltip = await screen.findByRole('tooltip', {
-    name: SAMPLE_DESCRIPTION,
-  });
+  const tooltip = await screen.findByRole('tooltip');
 
   expect(tooltip).toBeInTheDocument();
   expect(tooltip).toHaveTextContent(SAMPLE_DESCRIPTION);

diff --git a/...rontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx b/...rontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
@@ -35,7 +35,7 @@ const VerticalDivider = ({ title, description }: FilterDividerProps) => (
 const HorizontalDivider = ({ title, description }: FilterDividerProps) => {
   const theme = useTheme();
   const [titleRef, titleIsTruncated] =
-    useCSSTextTruncation<HTMLHeadingElement>(title);
+    useCSSTextTruncation<HTMLHeadingElement>();
 
   const tooltipOverlay = (
     <>
@@ -95,10 +95,10 @@ const HorizontalOverflowDivider = ({
 }: FilterDividerProps) => {
   const theme = useTheme();
   const [titleRef, titleIsTruncated] =
-    useCSSTextTruncation<HTMLHeadingElement>(title);
+    useCSSTextTruncation<HTMLHeadingElement>();
 
   const [descriptionRef, descriptionIsTruncated] =
-    useCSSTextTruncation<HTMLHeadingElement>(description);
+    useCSSTextTruncation<HTMLHeadingElement>();
 
   return (
     <div

diff --git a/superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts b/superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts
@@ -36,16 +36,27 @@ export const truncationCSS = css`
  * to be displayed, this hook returns a ref to attach to the text
  * element and a boolean for whether that element is currently truncated.
  */
-const useCSSTextTruncation = <T extends HTMLElement>(
-  text: string,
-): [React.RefObject<T>, boolean] => {
-  const ref = useRef<T>(null);
+const useCSSTextTruncation = <T extends HTMLElement>(): [
+  React.RefObject<T>,
+  boolean,
+] => {
   const [isTruncated, setIsTruncated] = useState(true);
+  const ref = useRef<T>(null);
+  const { offsetWidth, scrollWidth } = ref.current ?? {};
+  const prevWidths = useRef({ offsetWidth, scrollWidth });
+  const { offsetWidth: prevOffsetWidth, scrollWidth: prevScrollWidth } =
+    prevWidths.current;
+
   useEffect(() => {
-    if (ref.current) {
-      setIsTruncated(ref.current.offsetWidth < ref.current.scrollWidth);
+    if (
+      offsetWidth &&
+      scrollWidth &&
+      (offsetWidth !== prevOffsetWidth || scrollWidth !== prevScrollWidth)
+    ) {
+      prevWidths.current = { offsetWidth, scrollWidth };
+      setIsTruncated(offsetWidth < scrollWidth);
     }
-  }, [text]);
+  }, [offsetWidth, prevOffsetWidth, prevScrollWidth, scrollWidth]);
 
   return [ref, isTruncated];
 };