fix(useForwardExpose): sync currentElement on DOM update#2475
Open
fix(useForwardExpose): sync currentElement on DOM update#2475
currentElement on DOM update#2475Conversation
Contributor
📝 WalkthroughWalkthroughModifies Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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. Comment |
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/core/src/shared/useForwardExpose.test.ts (1)
299-324: Add one update-cycle test for direct DOM refs as well.This case validates the
asChildcomponent-instance path well. Please add a companion case whereforwardRefreceives a plainElementand the component re-renders, so the newonUpdatedsync path is protected end-to-end too.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/core/src/shared/useForwardExpose.test.ts` around lines 299 - 324, Add a companion test to the existing "should update currentElement when as-child conditional child swaps" case that exercises the direct DOM ref path: mount a component that uses useForwardExpose() and assigns forwardRef to a plain Element (not a component instance) via asChild or direct ref, track currentElement.value.nodeName in a post-effect (like renderNode), toggle between two different DOM tags (e.g., 'button' and 'span'), flush promises, and assert the nodeName updates accordingly; reference useForwardExpose, forwardRef, currentElement, Primitive and the existing test pattern to mirror the setup and toggling logic so the onUpdated sync path for direct Element refs is validated end-to-end.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/core/src/shared/useForwardExpose.ts`:
- Around line 21-24: In resolveCurrentElement, guard the $el property before
reading nodeName to avoid crashes when forwardRef receives a plain DOM element:
check for currentRef.value?.$el (or use optional chaining
currentRef.value?.$el?.nodeName) before comparing against ['#text', '#comment'],
and fall back to unrefElement(currentRef) when $el is missing; update the
conditional in resolveCurrentElement (referencing currentRef, $el, nodeName,
nextElementSibling, and unrefElement) so it only accesses nodeName if $el exists
and returns the appropriate element otherwise.
---
Nitpick comments:
In `@packages/core/src/shared/useForwardExpose.test.ts`:
- Around line 299-324: Add a companion test to the existing "should update
currentElement when as-child conditional child swaps" case that exercises the
direct DOM ref path: mount a component that uses useForwardExpose() and assigns
forwardRef to a plain Element (not a component instance) via asChild or direct
ref, track currentElement.value.nodeName in a post-effect (like renderNode),
toggle between two different DOM tags (e.g., 'button' and 'span'), flush
promises, and assert the nodeName updates accordingly; reference
useForwardExpose, forwardRef, currentElement, Primitive and the existing test
pattern to mirror the setup and toggling logic so the onUpdated sync path for
direct Element refs is validated end-to-end.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/core/src/shared/useForwardExpose.test.tspackages/core/src/shared/useForwardExpose.ts
Comment on lines
+21
to
24
| function resolveCurrentElement(): HTMLElement { | ||
| // $el could be text/comment for non-single root normal or text root, thus we retrieve the nextElementSibling | ||
| // @ts-expect-error ignore ts error | ||
| return ['#text', '#comment'].includes(currentRef.value?.$el.nodeName) ? currentRef.value?.$el.nextElementSibling : unrefElement(currentRef) |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n packages/core/src/shared/useForwardExpose.tsRepository: unovue/reka-ui
Length of output: 3820
Guard $el before reading nodeName to avoid update-time crashes.
If forwardRef receives a plain DOM element, it lacks a $el property. The expression currentRef.value?.$el.nodeName only guards against null/undefined on currentRef.value itself, not on the undefined $el property that follows. This throws when accessed during the onUpdated hook triggered by component updates.
🐛 Proposed fix
function resolveCurrentElement(): HTMLElement {
// $el could be text/comment for non-single root normal or text root, thus we retrieve the nextElementSibling
// `@ts-expect-error` ignore ts error
- return ['#text', '#comment'].includes(currentRef.value?.$el.nodeName) ? currentRef.value?.$el.nextElementSibling : unrefElement(currentRef)
+ const target = currentRef.value instanceof Element
+ ? currentRef.value
+ : currentRef.value?.$el
+
+ if (!target)
+ return undefined
+
+ return ['#text', '#comment'].includes(target.nodeName)
+ ? target.nextElementSibling
+ : target
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/core/src/shared/useForwardExpose.ts` around lines 21 - 24, In
resolveCurrentElement, guard the $el property before reading nodeName to avoid
crashes when forwardRef receives a plain DOM element: check for
currentRef.value?.$el (or use optional chaining currentRef.value?.$el?.nodeName)
before comparing against ['#text', '#comment'], and fall back to
unrefElement(currentRef) when $el is missing; update the conditional in
resolveCurrentElement (referencing currentRef, $el, nodeName,
nextElementSibling, and unrefElement) so it only accesses nodeName if $el exists
and returns the appropriate element otherwise.
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
1 participant
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.
🔗 Linked issue
resolves #2474
❓ Type of change
📚 Description
📸 Screenshots (if appropriate)
📝 Checklist
Summary by CodeRabbit
Bug Fixes
Tests