fix!: filtertag overflow via resizeobserver (#949)#951
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates FilterTag’s tooltip behavior so the tooltip title is derived from a reactive, post-render measurement rather than reading ref.current during render. It introduces a dedicated useTooltipTitle hook that owns the ref and tracks whether the chip label is truncated.
Changes:
- Added
useTooltipTitlehook to observe.MuiChip-labeltruncation viaResizeObserverand return{ ref, title }. - Refactored
FilterTagto use the new hook and remove ref reads during render. - Introduced a small type definition for the hook return shape.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/components/Filter/components/FilterTag/hooks/UseTooltipTitle/types.ts | Adds the UseTooltipTitle return type for the new hook. |
| src/components/Filter/components/FilterTag/hooks/UseTooltipTitle/hook.ts | Implements the ResizeObserver-based truncation/tooltip-title logic. |
| src/components/Filter/components/FilterTag/filterTag.tsx | Replaces render-time overflow checks with useTooltipTitle(label) usage. |
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>
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>
frano-m
force-pushed
the
fran/949-filtertag-overflow-resize-observer
branch
from
581eef5 to
633b18f
Compare
frano-m
changed the title
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>
NoopDog
approved these changes
Jun 5, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #949.
Replaces the ref-during-render overflow check in
FilterTagwith aResizeObserver-based measurement inside a dedicateduseTooltipTitlehook. The hook owns the ref + the derived overflow state and returns{ ref, title }— the title is the label when truncated,nullotherwise.Why
The original implementation read
tagRef.currentsynchronously during render to compareoffsetWidthvsscrollWidth. Two problems:tagRef.currentisnull, soisOverflowedwas alwaysfalseuntil something else triggered a re-render.A
ResizeObserveron the.MuiChip-labelelement fixes both: the boolean now updates reactively, and the tooltip stays accurate across layout changes.What changed
src/components/Filter/components/FilterTag/hooks/UseTooltipTitle/(hook.ts + types.ts) — owns ref + effect + state.filterTag.tsxslimmed down to JSX + a singleuseTooltipTitle(label)call.Test plan
Rebase note
Branched off main, which does not yet contain the
react-hooks/refsper-site suppression added by #950 (the PR for #941). Once #950 lands, this PR needs a rebase + the (now-redundant) suppression block can be dropped — that's the "remove the per-site suppression from #941" acceptance criterion in #949. Draft until that's done.🤖 Generated with Claude Code