Skip to content
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

fix(tooltip): accessing element.ref was removed in React 19 issue #4531

Open
wants to merge 1 commit into
base: canary
Choose a base branch
from
+10 −1
Open

fix(tooltip): accessing element.ref was removed in React 19 issue #4531

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
5 changes: 5 additions & 0 deletions .changeset/great-feet-lay.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@nextui-org/tooltip": patch
---

fix "Accessing element.ref was removed in React 19" issue (#4526)
6 changes: 5 additions & 1 deletion packages/components/tooltip/src/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,11 @@ const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
ref?: React.Ref<any>;
};

trigger = cloneElement(child, getTriggerProps(child.props, child.ref));
// Accessing the ref from props, else fallback to element.ref
// https://github.com/facebook/react/pull/28348
const childRef = child.props.ref ?? (child as any).ref;

trigger = cloneElement(child, getTriggerProps(child.props, childRef));
Comment on lines +51 to +55
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 Codebase verification

Update needed: Similar ref handling change required in popover-trigger

The same React 19 compatibility update is needed in:

  • packages/components/popover/src/popover-trigger.tsx

The other instances of .ref usage in the codebase are using different patterns and are safe.

🔗 Analysis chain

LGTM! The ref handling change looks correct.

The implementation properly handles the React 19 changes by:

  1. First attempting to access ref from props (new React way)
  2. Falling back to element.ref (backward compatibility)
  3. Including a reference to the relevant React PR

This change ensures compatibility while maintaining backward support.

Let's verify there are no other instances of direct ref access that need similar updates:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for potential direct ref access patterns
rg -g '*.{tsx,ts,jsx,js}' '\.(ref)\b(?!\s*\?\?)'

Length of output: 283

Script:

#!/bin/bash
# Search for .ref access patterns with simpler regex
echo "=== Searching with ripgrep ==="
rg -g '*.{tsx,ts,jsx,js}' '\.ref\b'

echo -e "\n=== Searching with ast-grep ==="
# Look for property access patterns with 'ref'
ast-grep --pattern 'PropertyAccess {
  object: $_,
  property: "ref"
}'

Length of output: 1191

}
} catch (error) {
trigger = <span />;
Expand Down
Loading