fix: correct Vue ref auto-unwrapping in slot components #5378
Conversation
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
Fixed the misuse of exposed template refs in InputSlot and OutputSlot components. When Vue exposes a Ref via defineExpose, it auto-unwraps it on the parent component instance. The previous code was incorrectly double-unwrapping by calling .value on an already unwrapped HTMLElement. Changes: - Updated type to ComponentPublicInstance with unwrapped HTMLElement - Replaced watch with watchEffect for better timing handling - Removed incorrect .value access on auto-unwrapped ref This ensures slot elements are properly registered with useDomSlotRegistration, fixing slot position tracking and hit-testing in the layout system. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
dosubot
bot
added
the
size:M
🎭 Playwright Test Results✅ All tests passed across all browsers! ⏰ Completed at: 09/06/2025, 06:05:26 AM UTC 📊 Test Reports by Browser🎉 Your tests are passing across all browsers! |
|
This is one of like three issues blocking link rendering from depending on the layout tree properly |
LittleSound
approved these changes
Sep 6, 2025
christian-byrne
approved these changes
Sep 6, 2025
Merged
snomiao
pushed a commit
that referenced
this pull request
Sep 12, 2025
Fixed the misuse of exposed template refs in InputSlot and OutputSlot components. When Vue exposes a Ref via defineExpose, it auto-unwraps it on the parent component instance. The previous code was incorrectly double-unwrapping by calling .value on an already unwrapped HTMLElement. Changes: - Updated type to ComponentPublicInstance with unwrapped HTMLElement - Replaced watch with watchEffect for better timing handling - Removed incorrect .value access on auto-unwrapped ref This ensures slot elements are properly registered with useDomSlotRegistration, fixing slot position tracking and hit-testing in the layout system. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Claude <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Fixed Vue's auto-unwrapping behavior for exposed template refs in slot components, resolving slot registration failures.
Changes
defineExposein InputSlot.vue and OutputSlot.vueReview Focus
The key fix addresses Vue's automatic ref unwrapping when a child component exposes a ref through
defineExpose. The parent was incorrectly treating the exposed value as aRef<HTMLElement>and calling.value, but Vue already unwraps it toHTMLElement.Technical Details
Exact Issue
SlotConnectionDot.vueexposes a template ref withdefineExpose({ slotElRef }), whereslotElRefcomes fromuseTemplateRef('slot-el')defineExpose, Vue auto-unwraps it on the parent component instance proxyRefand read.value(double-unwrapping), which producedundefinedat runtimeslotElRefstayed null anduseDomSlotRegistrationhad no element to measure/register, breaking slot hit-testing/linkingWhat Changed
Before:
connectionDotRef: ref<{ slotElRef: Ref<HTMLElement> }>()watch(connectionDotRef, ...)and accessednewValue.slotElRef.valueAfter:
connectionDotRef: ref<ComponentPublicInstance<{ slotElRef: HTMLElement | undefined }> | null>()watchEffect(() => { slotElRef.value = connectionDotRef.value?.slotElRef || null })Why It Works
.valueon an already unwrapped HTMLElementwatchEffectreruns when the child's exposedslotElRefappears (after mount), whereas the oldwatchonly reacted to component ref assignmentWith these fixes,
slotElRefis reliably populated,useDomSlotRegistrationcan measure and register slot positions, and slot hit-testing/connection logic works as intended.┆Issue is synchronized with this Notion page by Unito