Skip to content

perf(Typography): skip Tooltip render when text is not overflowing #3424

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rivka-ungar wants to merge 1 commit into
base: master
Choose a base branch
from
Open

perf(Typography): skip Tooltip render when text is not overflowing #3424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions packages/components/typography/src/Typography/Typography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,23 +84,25 @@ const Typography = forwardRef(

const overrideAlign = align === "inherit" ? "alignInherit" : align;

return (
<Tooltip {...overrideTooltipProps}>
{React.createElement(
element,
{
id,
style: ellipsisStyle,
"data-testid": dataTestId,
className: cx(styles.typography, styles[color], styles[overrideAlign], ellipsisClass, className),
ref: mergedRef,
role,
...htmlAttributes
},
children
)}
</Tooltip>
const baseElement = React.createElement(
element,
{
id,
style: ellipsisStyle,
"data-testid": dataTestId,
className: cx(styles.typography, styles[color], styles[overrideAlign], ellipsisClass, className),
ref: mergedRef,
role,
...htmlAttributes
},
children
);

if (!overrideTooltipProps.content) {
return baseElement;
}

return <Tooltip {...overrideTooltipProps}>{baseElement}</Tooltip>;
}
);

Expand Down
2 changes: 1 addition & 1 deletion packages/components/typography/src/Typography/TypographyHooks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function useTooltipProps(
overflowTolerance: number
) {
const isOverflowing = useIsOverflowing({
ref: ellipsis ? ref : null,
ref: ellipsis && !withoutTooltip ? ref : null,

@qodo-free-for-open-source-projects qodo-free-for-open-source-projects Bot Jul 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remediation recommended

1. Stale overflow after re-enable 🐞 Bug ≡ Correctness

useTooltipProps now passes null to useIsOverflowing when withoutTooltip=true, which stops
the ResizeObserver and can leave isOverflowing at its previous value. If withoutTooltip later
flips back to false after layout/content changes, Typography can briefly make the wrong tooltip
decision until the first ResizeObserver callback runs.
Agent Prompt 
### Issue description
`useTooltipProps` disables overflow observation by passing a `null` ref into `useIsOverflowing` when `withoutTooltip=true`. Because `useIsOverflowing` stores overflow in React state and only updates it via the ResizeObserver callback, disabling the observer can leave a stale `isOverflowing` value that is reused when tooltips are re-enabled.

### Issue Context
This is most visible when `withoutTooltip` is toggled at runtime (e.g., responsive UI, user preference toggles) and the element’s overflow state changes while observation is disabled. On re-enable, Typography may mount (or not mount) Tooltip for one render based on stale overflow state.

### Fix Focus Areas
- packages/components/typography/src/Typography/TypographyHooks.tsx[34-40]
- packages/hooks/src/useIsOverflowing/index.ts[36-53]

### Suggested fix approach
Update `useIsOverflowing` to explicitly handle a missing/disabled ref by resetting overflow to `false` when `ref` is falsy or when `ref.current` is not available, so re-enabling observation starts from a consistent state. This preserves the perf optimization while avoiding transient incorrect tooltip decisions.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

ignoreHeightOverflow,
tolerance: overflowTolerance
});
Expand Down
Loading