fix: azulfiledownload: accept ref so it can be used as a tooltip child without a span wrapper (#944)#946
Open
frano-m wants to merge 1 commit into
Open
fix: azulfiledownload: accept ref so it can be used as a tooltip child without a span wrapper (#944)#946frano-m wants to merge 1 commit into
frano-m wants to merge 1 commit into
Conversation
…d without a span wrapper (#944) azulfiledownload previously returned a <fragment>, which has no dom node to attach a ref to and isn't a function component that accepts refs. when used as the child of an mui <tooltip>, tooltip's internal cloneelement(child, { ref }) call lands the ref on nothing — hover detection fails and the tooltip doesn't render. consumers worked around this by wrapping the component in a <span> at the call site, e.g. children: <span><azulfiledownload ... /></span>. wrap the component's contents in a single <span> and forward the caller's ref to it. react 19 lets us accept the ref as a regular prop on the props interface — no forwardref wrapper needed. consumers can now write children: <azulfiledownload ... /> directly inside a tooltip again. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors AzulFileDownload so it can be used directly as an MUI Tooltip child. The previous Fragment root prevented Tooltip from forwarding its anchor ref to a DOM node, which had been masked by a bug in ComponentCreator that wrapped children in an array. This PR replaces the Fragment with a <span ref={ref}> and adds an optional ref prop using React 19's ref-as-prop pattern.
Changes:
- Replace top-level
Fragmentwith a<span>wrapper that receives a forwarded ref. - Add an optional
ref?: Ref<HTMLSpanElement>toAzulFileDownloadPropsand destructure it in the component.
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
AzulFileDownloadreturned a<Fragment>and didn't accept aref, so MUITooltipcould not forward its anchor ref to a DOM node. Consumers worked around this by wrapping the component in a<span>at the call site.<span>and acceptrefon the props interface (React 19 ref-as-prop — noforwardRefwrapper needed). Consumers can now use<AzulFileDownload ... />directly as a Tooltip child.Layout impact
None expected. The new
<span>is inline by default and the IconButton inside isinline-flex, so the rendered DOM occupies the same flow position it did when the IconButton was a direct child of the table cell. The hidden anchor is stilldisplay: none. No findable-ui selectors target a direct-child IconButton in a way that would be affected by the new wrapper.Test plan
npm run check-format— cleannpm run lint— cleannpm run test-compile— cleannpm test— all suites pass<span>wrapper at the call site, button still visually identical, download still triggers.Related
ComponentCreatorchildren-array fix exposed the ref-forwarding gap.buildFileDownloadWithTooltipcan drop its temporary<span>wrapper.Closes #944
🤖 Generated with Claude Code