fix(tooltip): accessing element.ref was removed in React 19 issue #4531
Conversation
🦋 Changeset detectedLatest commit: 6a16b99 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughA patch has been introduced for the Changes
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.changeset/great-feet-lay.md(1 hunks)packages/components/tooltip/src/tooltip.tsx(1 hunks)
🔇 Additional comments (1)
.changeset/great-feet-lay.md (1)
1-5: LGTM! Changeset is properly configured.The changeset correctly:
- Uses patch version bump for backward-compatible fix
- References the issue number
- Provides clear context about the React 19 compatibility change
| // 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)); |
There was a problem hiding this comment.
💡 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:
- First attempting to access ref from props (new React way)
- Falling back to element.ref (backward compatibility)
- 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
Closes #4526
📝 Description
As titled. Applied the same fix as 3f9e0ff.
⛳️ Current behavior (updates)
🚀 New behavior
No such error
💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
Summary by CodeRabbit
@nextui-org/tooltippackage to resolve arefaccess issue in React 19Tooltipcomponent's ref handling to ensure compatibility with newer React versions