fix!: filtertag overflow via resizeobserver (#949) (#951)

frano-m · claude · web-flow · commit d473ab6bdce4 · 2026-06-04T20:53:04.000-07:00
* fix: filtertag overflow via resizeobserver (#949) Replaces the ref-during-render measurement (which only computed isOverflowed once mid-render with a null ref, then never reacted to layout changes) with a ResizeObserver inside a dedicated useTooltipTitle hook that returns the chip ref and the tooltip title together. The tooltip now stays accurate across container resizes, font loads, and label changes. Hook lives at src/components/Filter/components/FilterTag/hooks/UseTooltipTitle/ following the existing per-folder hook convention. Companion to #941 (PR #950) — once that lands the react-hooks/refs suppression added there is no longer needed and will be dropped on rebase. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * chore: drop unused superseded prop and SupersededTag styled (#949) Audit while landing #949 revealed superseded was always passed as false from every call site (filters.tsx, FilterTag/utils.ts, stories args, filterTags.stories.tsx) and the SupersededTag styled component was therefore never rendered. Strips the prop from CategoryTag, FilterTag, FilterTags, and the two stories files. Deletes filterTag.styles.ts (only contained SupersededTag). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * test: cover useTooltipTitle overflow detection (#949) Adds Jest/RTL coverage for the new FilterTag tooltip behaviour: - Suppresses the tooltip when offsetWidth === scrollWidth - Shows the label as the tooltip title when scrollWidth > offsetWidth - Re-evaluates on subsequent ResizeObserver fires (truncated then fits again) ResizeObserver is mocked to capture callbacks so the tests can trigger re-measurement deterministically; .MuiChip-label dimensions are overridden via Object.defineProperty so the overflow check returns a known result in jsdom. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Fran McDade <18710366+frano-m@users.noreply.github.com> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
diff --git a/src/common/entities.ts b/src/common/entities.ts
@@ -40,7 +40,6 @@ export type ClearAll = typeof CLEAR_ALL;
 export interface CategoryTag {
   label: string;
   onRemove: () => void;
-  superseded: boolean;
 }
 
 /**
diff --git a/src/components/Filter/components/FilterTag/filterTag.styles.ts b/src/components/Filter/components/FilterTag/filterTag.styles.ts
diff --git a/src/components/Filter/components/FilterTag/filterTag.tsx b/src/components/Filter/components/FilterTag/filterTag.tsx
@@ -1,12 +1,11 @@
 import { CloseRounded } from "@mui/icons-material";
 import { Chip, Tooltip } from "@mui/material";
-import { JSX, useRef } from "react";
-import { SupersededTag } from "./filterTag.styles";
+import { JSX } from "react";
+import { useTooltipTitle } from "./hooks/UseTooltipTitle/hook";
 
 export interface FilterTagProps {
   label: string;
   onRemove: () => void;
-  superseded: boolean;
 }
 
 const DEFAULT_SLOT_PROPS = {
@@ -26,34 +25,24 @@ const DEFAULT_SLOT_PROPS = {
   },
 };
 
-export const FilterTag = ({
-  label,
-  onRemove,
-  superseded,
-}: FilterTagProps): JSX.Element => {
-  const Tag = superseded ? SupersededTag : Chip;
-  const tagRef = useRef<HTMLDivElement>(null);
-  /* eslint-disable react-hooks/refs -- ref-during-render measurement; needs proper ResizeObserver-in-effect rewrite. Tracked in #949. */
-  const tagLabelElement =
-    tagRef.current?.querySelector<HTMLElement>(".MuiChip-label");
-  const isOverflowed =
-    (tagLabelElement?.offsetWidth ?? 0) < (tagLabelElement?.scrollWidth ?? 0);
-  /* eslint-enable react-hooks/refs -- end suppression for #949. */
+export const FilterTag = ({ label, onRemove }: FilterTagProps): JSX.Element => {
+  const { ref, title } = useTooltipTitle(label);
+
   return (
     <Tooltip
       arrow
       disableInteractive
       slotProps={DEFAULT_SLOT_PROPS}
-      title={isOverflowed ? label : null}
+      title={title}
     >
-      <Tag
+      <Chip
         clickable={false} // removes unwanted active and hover ui; "pointer" cursor added to "filterTag" variant in theme.
         color="primary"
         deleteIcon={<CloseRounded color="inherit" />}
         label={label}
         onClick={onRemove}
         onDelete={onRemove}
-        ref={tagRef}
+        ref={ref}
         variant="filterTag"
       />
     </Tooltip>
diff --git a/src/components/Filter/components/FilterTag/hooks/UseTooltipTitle/hook.ts b/src/components/Filter/components/FilterTag/hooks/UseTooltipTitle/hook.ts
@@ -0,0 +1,28 @@
+import { useEffect, useRef, useState } from "react";
+import { UseTooltipTitle } from "./types";
+
+/**
+ * Tracks whether the chip's `.MuiChip-label` is truncated by ellipsis,
+ * returning the label string as a tooltip title only when it is. Uses
+ * `ResizeObserver` on the label element so the title stays accurate
+ * across container resizes, font loads, and label changes.
+ * @param label - Filter tag label.
+ * @returns The ref to attach to the chip element and the tooltip title
+ *   (the label when truncated, otherwise null).
+ */
+export function useTooltipTitle(label: string): UseTooltipTitle {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isOverflowed, setIsOverflowed] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current?.querySelector<HTMLElement>(".MuiChip-label");
+    if (!el) return;
+    const update = (): void => setIsOverflowed(el.offsetWidth < el.scrollWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    return (): void => observer.disconnect();
+  }, [label]);
+
+  return { ref, title: isOverflowed ? label : null };
+}
diff --git a/src/components/Filter/components/FilterTag/hooks/UseTooltipTitle/types.ts b/src/components/Filter/components/FilterTag/hooks/UseTooltipTitle/types.ts
@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+
+export interface UseTooltipTitle {
+  ref: RefObject<HTMLDivElement | null>;
+  title: string | null;
+}
diff --git a/src/components/Filter/components/FilterTag/stories/args.ts b/src/components/Filter/components/FilterTag/stories/args.ts
@@ -6,17 +6,14 @@ import { FilterTag } from "../filterTag";
 export const DEFAULT_ARGS: ComponentProps<typeof FilterTag> = {
   label: "male",
   onRemove: fn(),
-  superseded: false,
 };
 
 export const WITH_ELLIPSIS_ARGS: ComponentProps<typeof FilterTag> = {
   label: LOREM_IPSUM.LONG,
   onRemove: fn(),
-  superseded: false,
 };
 
 export const WITH_RANGE_ARGS: ComponentProps<typeof FilterTag> = {
   label: "10 - 34",
   onRemove: fn(),
-  superseded: false,
 };
diff --git a/src/components/Filter/components/FilterTag/utils.ts b/src/components/Filter/components/FilterTag/utils.ts
@@ -28,7 +28,6 @@ export function buildRangeTag(
           undefined,
           VIEW_KIND.RANGE,
         ),
-      superseded: false,
     },
   ];
 }
diff --git a/src/components/Filter/components/FilterTags/filterTags.stories.tsx b/src/components/Filter/components/FilterTags/filterTags.stories.tsx
@@ -31,32 +31,26 @@ export const FilterTagsStory: Story = {
       {
         label: "Normal",
         onRemove: onRemove,
-        superseded: false,
       },
       {
         label: "abscess",
         onRemove: onRemove,
-        superseded: true,
       },
       {
         label: "acoustic neuroma",
         onRemove: onRemove,
-        superseded: false,
       },
       {
         label: "acute kidney failure",
         onRemove: onRemove,
-        superseded: false,
       },
       {
         label: "acute kidney tubular necrosis",
         onRemove: onRemove,
-        superseded: false,
       },
       {
         label: "alcohol abuse",
         onRemove: onRemove,
-        superseded: false,
       },
     ],
   },
diff --git a/src/components/Filter/components/FilterTags/filterTags.tsx b/src/components/Filter/components/FilterTags/filterTags.tsx
@@ -10,13 +10,8 @@ export interface FilterTagsProps {
 export const FilterTags = ({ tags }: FilterTagsProps): JSX.Element | null => {
   return tags && tags.length ? (
     <Tags>
-      {tags.map(({ label, onRemove, superseded }, t) => (
-        <Tag
-          key={`${label}${t}`}
-          label={label}
-          onRemove={onRemove}
-          superseded={superseded}
-        />
+      {tags.map(({ label, onRemove }, t) => (
+        <Tag key={`${label}${t}`} label={label} onRemove={onRemove} />
       ))}
     </Tags>
   ) : null;
diff --git a/src/components/Filter/components/Filters/filters.tsx b/src/components/Filter/components/Filters/filters.tsx
@@ -52,7 +52,6 @@ function buildFilterTags(
       return {
         label: label,
         onRemove: () => onFilter(categoryKey, categoryValueKey, !selected),
-        superseded: false,
       };
     });
 }
diff --git a/tests/filterTag.test.tsx b/tests/filterTag.test.tsx
@@ -0,0 +1,104 @@
+import { jest } from "@jest/globals";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { FilterTag } from "../src/components/Filter/components/FilterTag/filterTag";
+
+const MUI_CHIP_LABEL = ".MuiChip-label";
+const MUI_CHIP_ROOT = ".MuiChip-root";
+const SHORT_LABEL = "short";
+const LONG_LABEL = "this label is wide enough to overflow its container";
+
+const observerCallbacks: ResizeObserverCallback[] = [];
+
+beforeEach(() => {
+  observerCallbacks.length = 0;
+  global.ResizeObserver = jest.fn().mockImplementation((cb) => {
+    observerCallbacks.push(cb as ResizeObserverCallback);
+    return {
+      disconnect: jest.fn(),
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+    };
+  }) as unknown as typeof ResizeObserver;
+});
+
+/**
+ * Override an element's measured dimensions so the overflow check
+ * (`offsetWidth < scrollWidth`) returns a deterministic result in jsdom.
+ * @param el - Target element (the rendered `.MuiChip-label`).
+ * @param offsetWidth - Visible content-box width.
+ * @param scrollWidth - Intrinsic content width.
+ */
+function setDimensions(
+  el: HTMLElement,
+  offsetWidth: number,
+  scrollWidth: number,
+): void {
+  Object.defineProperty(el, "offsetWidth", {
+    configurable: true,
+    value: offsetWidth,
+  });
+  Object.defineProperty(el, "scrollWidth", {
+    configurable: true,
+    value: scrollWidth,
+  });
+}
+
+/**
+ * Synchronously trigger every captured ResizeObserver callback inside an
+ * `act` block so the resulting setState is flushed before the test reads
+ * DOM state.
+ */
+function triggerResize(): void {
+  act(() => {
+    observerCallbacks.forEach((cb) =>
+      cb([] as unknown as ResizeObserverEntry[], {} as ResizeObserver),
+    );
+  });
+}
+
+describe("FilterTag tooltip title", () => {
+  it("suppresses the tooltip when the label fits", async () => {
+    const { container } = render(
+      <FilterTag label={SHORT_LABEL} onRemove={(): void => undefined} />,
+    );
+    const labelEl = container.querySelector<HTMLElement>(MUI_CHIP_LABEL);
+    expect(labelEl).not.toBeNull();
+    setDimensions(labelEl!, 100, 100); // offsetWidth === scrollWidth → no overflow
+    triggerResize();
+
+    fireEvent.mouseOver(container.querySelector(MUI_CHIP_ROOT)!);
+    // MUI suppresses the tooltip popper entirely when `title` is null.
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("shows the label as the tooltip title when truncated", async () => {
+    const { container } = render(
+      <FilterTag label={LONG_LABEL} onRemove={(): void => undefined} />,
+    );
+    const labelEl = container.querySelector<HTMLElement>(MUI_CHIP_LABEL);
+    expect(labelEl).not.toBeNull();
+    setDimensions(labelEl!, 100, 200); // scrollWidth > offsetWidth → overflow
+    triggerResize();
+
+    fireEvent.mouseOver(container.querySelector(MUI_CHIP_ROOT)!);
+    const tooltip = await screen.findByRole("tooltip");
+    expect(tooltip.textContent).toContain(LONG_LABEL);
+  });
+
+  it("clears the tooltip title when the label later fits again", async () => {
+    const { container } = render(
+      <FilterTag label={LONG_LABEL} onRemove={(): void => undefined} />,
+    );
+    const labelEl = container.querySelector<HTMLElement>(MUI_CHIP_LABEL);
+    expect(labelEl).not.toBeNull();
+    // First measurement reports overflow.
+    setDimensions(labelEl!, 100, 200);
+    triggerResize();
+    // Then container resizes such that the label now fits.
+    setDimensions(labelEl!, 200, 200);
+    triggerResize();
+
+    fireEvent.mouseOver(container.querySelector(MUI_CHIP_ROOT)!);
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,6 @@ export type ClearAll = typeof CLEAR_ALL;`
`40`	`40`	`export interface CategoryTag {`
`41`	`41`	`label: string;`
`42`	`42`	`onRemove: () => void;`
`43`		`- superseded: boolean;`
`44`	`43`	`}`
`45`	`44`
`46`	`45`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,6 @@ export function buildRangeTag(`
`28`	`28`	`undefined,`
`29`	`29`	`VIEW_KIND.RANGE,`
`30`	`30`	`),`
`31`		`- superseded: false,`
`32`	`31`	`},`
`33`	`32`	`];`
`34`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -31,32 +31,26 @@ export const FilterTagsStory: Story = {`
`31`	`31`	`{`
`32`	`32`	`label: "Normal",`
`33`	`33`	`onRemove: onRemove,`
`34`		`- superseded: false,`
`35`	`34`	`},`
`36`	`35`	`{`
`37`	`36`	`label: "abscess",`
`38`	`37`	`onRemove: onRemove,`
`39`		`- superseded: true,`
`40`	`38`	`},`
`41`	`39`	`{`
`42`	`40`	`label: "acoustic neuroma",`
`43`	`41`	`onRemove: onRemove,`
`44`		`- superseded: false,`
`45`	`42`	`},`
`46`	`43`	`{`
`47`	`44`	`label: "acute kidney failure",`
`48`	`45`	`onRemove: onRemove,`
`49`		`- superseded: false,`
`50`	`46`	`},`
`51`	`47`	`{`
`52`	`48`	`label: "acute kidney tubular necrosis",`
`53`	`49`	`onRemove: onRemove,`
`54`		`- superseded: false,`
`55`	`50`	`},`
`56`	`51`	`{`
`57`	`52`	`label: "alcohol abuse",`
`58`	`53`	`onRemove: onRemove,`
`59`		`- superseded: false,`
`60`	`54`	`},`
`61`	`55`	`],`
`62`	`56`	`},`
Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,6 @@ function buildFilterTags(`
`52`	`52`	`return {`
`53`	`53`	`label: label,`
`54`	`54`	`onRemove: () => onFilter(categoryKey, categoryValueKey, !selected),`
`55`		`- superseded: false,`
`56`	`55`	`};`
`57`	`56`	`});`
`58`	`57`	`}`