Skip to content

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
mainfrom
fran/944-azulfiledownload-ref
Open

fix: azulfiledownload: accept ref so it can be used as a tooltip child without a span wrapper (#944)#946
frano-m wants to merge 1 commit into
mainfrom
fran/944-azulfiledownload-ref

Conversation

@frano-m
Copy link
Copy Markdown
Contributor

@frano-m frano-m commented May 28, 2026

Summary

  • AzulFileDownload returned a <Fragment> and didn't accept a ref, so MUI Tooltip could not forward its anchor ref to a DOM node. Consumers worked around this by wrapping the component in a <span> at the call site.
  • Wrap the component's contents in a single <span> and accept ref on the props interface (React 19 ref-as-prop — no forwardRef wrapper 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 is inline-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 still display: 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 — clean
  • npm run lint — clean
  • npm run test-compile — clean
  • npm test — all suites pass
  • Smoke-test in data-biosphere — Files-column download tooltip renders correctly without a <span> wrapper at the call site, button still visually identical, download still triggers.

Related

Closes #944

🤖 Generated with Claude Code

…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>
Copilot AI review requested due to automatic review settings May 28, 2026 07:44
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

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 Fragment with a <span> wrapper that receives a forwarded ref.
  • Add an optional ref?: Ref<HTMLSpanElement> to AzulFileDownloadProps and destructure it in the component.

@frano-m frano-m marked this pull request as ready for review May 28, 2026 09:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

AzulFileDownload: forward ref so it can be used as a Tooltip child without a span wrapper

3 participants