fix: getNodeRef should not fallback to element.ref in React 19

[GuinsooRocky]

Summary

getNodeRef currently triggers React 19's Accessing element.ref was removed in React 19 warning for any element rendered without an explicit ref prop.

Root cause

The current implementation (introduced in #593, replacing the original version-based branch from #545):

return ele.props.propertyIsEnumerable('ref') ? ele.props.ref : ele.ref;

propertyIsEnumerable('ref') returns false when the rendered JSX does not pass a ref, so the code falls through to ele.ref. Reading element.ref is exactly what React 19 deprecated.

This means the warning fires for every consumer of getNodeRef whose children may or may not carry a ref — for example rc-dialog, rc-drawer, and downstream components like antd's <Modal /> / <Drawer />.

Fix

Restore the version-based branch that PR #545 originally used. On React 19+ read props.ref; on older React keep reading element.ref. ReactMajorVersion is already declared at the top of the file (used by supportRef), so the change is local and minimal.

return ReactMajorVersion >= 19 ? (ele.props.ref ?? null) : ele.ref;

Repro

Any element passed through getNodeRef without a ref prop:

import { getNodeRef } from 'rc-util/lib/ref';

const node = <div />;
getNodeRef(node);
// → console: "Accessing element.ref was removed in React 19. ref is now a regular prop."

In real apps this surfaces every time a <Modal> / <Drawer> / <Dialog> is rendered with children that don't forward refs.

Test

Added a regression test in tests/ref-19.test.tsx that:

• renders a <div /> without a ref
• asserts getNodeRef(node) returns null
• asserts console.error was not called

The existing it('getNodeRef') test is unchanged.

Related

• Regression of refactor in refactor: use props check instead of version check #593
• Closes the runtime warning observed in [Menu] - Warning: Accessing element.ref was removed in React 19 ant-design/ant-design#49267, element.ref在React19被移除了 ant-design/ant-design#51986, Compatibility with React 19 and Next.js 15 ant-design/ant-design#51458 (all closed without fix)

---

中文摘要

getNodeRef 在 React 19 下会对没有传 ref prop 的元素触发 Accessing element.ref was removed in React 19 警告。

根因

当前实现（来自 #593，覆盖了 #545 引入时的版本分支判断）：

return ele.props.propertyIsEnumerable('ref') ? ele.props.ref : ele.ref;

propertyIsEnumerable('ref') 在 JSX 没传 ref 时返回 false，于是 fallback 读 ele.ref —— 而 element.ref 正是 React 19 标记为 deprecated 的访问点。

这导致所有使用 getNodeRef 的组件（rc-dialog / rc-drawer / antd <Modal /> / <Drawer /> 等）只要 children 不显式带 ref，控制台就会冒红字。

修法

把分支逻辑回退到 #545 引入时的"按 React 版本判断"。文件顶部已有的 ReactMajorVersion 直接复用，改动只有这一处。

return ReactMajorVersion >= 19 ? (ele.props.ref ?? null) : ele.ref;

测试

tests/ref-19.test.tsx 增加一条回归测试：

• 渲染 <div />（不传 ref）
• 断言 getNodeRef(node) 返回 null
• 断言 console.error 没被调用

Summary by CodeRabbit

• Bug Fixes

  • 改进了与 React 19 的兼容性，避免在无显式 ref 的元素上触发弃用/访问警告，并确保在此类情况下返回 null。

• Tests

  • 新增回归测试，验证在 React 19 场景下不会触发控制台错误且行为保持稳定。

[vercel]

@GuinsooRocky is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 19dbfec1-40ec-4bea-b4e9-144df495e9fb

📥 Commits

Reviewing files that changed from the base of the PR and between e700d72 and fabcc48.

📒 Files selected for processing (1)

• src/ref.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/ref.ts

---

Walkthrough

更新 getNodeRef：针对 ReactMajorVersion 分支以在 React 19+ 从 ele.props.ref 获取 ref（避免访问 ele.ref），并添加回归测试验证对无显式 ref 元素返回 null 且不触发 console.error。

变更

React 19 Ref 兼容性

层级 / 文件	摘要
核心实现 src/ref.ts	getNodeRef 根据 ReactMajorVersion 分支处理：React 19+ 返回 ele.props.ref ?? null，早期版本返回 ele.ref ?? null；更新了相关注释，移除了旧的 propertyIsEnumerable('ref') 分支逻辑。
测试覆盖 tests/ref-19.test.tsx	新增 React 19 回归测试，验证对无显式 ref 的元素调用 getNodeRef 返回 null 且不触发 console.error。

预估代码审查工作量

🎯 2 (简单) | ⏱️ ~10 分钟

相关的 PR

• react-component/util#594：同样修改了 src/ref.ts 的 ref 处理逻辑以支持 React 19 的 props.ref 位置。
• react-component/util#623：根据 React 主版本调整 src/ref.ts 中的 ref 处理逻辑。
• react-component/util#602：修改 src/ref.ts 中的 ref 处理逻辑，为 supportRef 和 getNodeRef 添加空值检查。

建议的审查人员

• zombieJ

诗

🐰 Props.ref 在枝头颤动，
十九版本轻移了踪，
我悄悄避开 element.ref 的坑，
测试轻声确认无恙，
代码悄然更稳重。

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title accurately summarizes the main change: fixing getNodeRef to avoid fallback to element.ref in React 19, which aligns with the core issue of preventing deprecation warnings.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request updates the getNodeRef utility to support React 19 by conditionally accessing ref from props instead of the element itself, which prevents deprecation warnings. A regression test was also added to verify that elements without a ref do not trigger these warnings. The review feedback suggests applying the nullish coalescing operator to the legacy code path to ensure a consistent null return type and improve type safety for consumers of the utility.

[GuinsooRocky]

cc @zombieJ — this is a regression of #593 (the 'props check instead of version check' refactor). propertyIsEnumerable('ref') returns false whenever the element was rendered without an explicit ref prop, which makes getNodeRef fall through to element.ref and trigger React 19's deprecation warning. Restoring the version branch from #545. Test included. Would appreciate a look when you have a moment 🙏