Skip to content

fix: popup not realigned after target position change on resize - #115

Open
dogledogle wants to merge 1 commit into
react-component:masterfrom
dogledogle:fix/tour-resize-align
Open

dogledogle wants to merge 1 commit into
react-component:masterfrom
dogledogle:fix/tour-resize-align

Conversation

@dogledogle

@dogledogle dogledogle commented Oct 30, 2026 •

Copy link
Copy Markdown

Problem

After a window resize, the Tour popup was not realigned to the target position. The mask and placeholder moved immediately, but the popup stayed at the stale position until an unrelated re-render happened.

窗口缩放后,Tour 弹层没有重新对齐到目标位置:遮罩和占位元素即时更新了,但弹层停留在旧位置,直到下一次无关渲染才恢复。

Before / After

Before

After

Root Cause

The measured target position (posInfo from useTarget) is committed and applied to the placeholder, but nothing forces the popup to re-align afterwards — forceAlign() was only triggered by arrowPointAtCenter or mergedCurrent changes. On resize/scroll, the popup aligned against the stale placeholder position and lagged one update behind.

Fix

Add posInfo to the useLayoutEffect dependency list so forceAlign() runs right after the new position is committed to the DOM. posInfo keeps a stable reference when the target rect is unchanged, so no redundant alignment loop is introduced.

A regression test is included: it resizes the window and asserts the popup aligns to the committed target position.

Changelog

Language Changelog
🇨🇳 中文 修复 resize 后弹层位置更新慢一拍的问题
🇺🇸 English Fix popup position lagging one update behind after resize

Summary by CodeRabbit

  • Bug Fixes
    • 修复弹窗定位更新不及时的问题。目标位置变化后,弹窗现在会重新调整对齐,确保弹窗与目标位置保持一致。

@vercel

vercel Bot commented Oct 30, 2026

Copy link
Copy Markdown

@dogledogle is attempting to deploy a commit to the afc163's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Oct 30, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 14267406-a830-44c9-b2d9-6116edee9659
Commits

Reviewing files that changed from the base of the PR and between 1cd4d96 and 6237038.

Files selected for processing: 2
  • src/Tour.tsx
  • tests/index.test.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

Walkthrough

对齐 effect 现在会在 posInfo 变化时调用 forceAlign。新增窗口调整大小后的定位回归测试。handleEscClose 的处理逻辑保持不变。

Changes

Tour 定位

Layer / File(s) Summary
定位更新与回归验证
src/Tour.tsx, tests/index.test.tsx
对齐 effect 将 posInfo 加入依赖,并在变化时调用 forceAlign。新增测试验证目标位置和窗口尺寸变化后的占位元素及弹窗定位。Escape 关闭处理逻辑未变;测试中的回调格式和空行有所调整。

Priority: Normal

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix

Merge Risk: Minimal · up to 62370

No merge-blocking issue was established for the popup alignment change.

Pre-merge checks: Passed 5
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed 标题准确描述了主要变更:修复窗口调整大小后,目标位置变化时弹窗未重新对齐的问题。标题简洁、具体,并与代码和回归测试一致。
Docstring Coverage Passed No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
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.
Full details: Docstring Coverage

Explanation

No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 2 files.

Finishing Touches: 💡 1
🛠️ Fix failing CI checks: 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

我是兔子,轻跳来庆贺,
目标移动,定位随之更新。
窗口缩放,弹窗稍后跟上,
占位元素先落在新位置,
我竖起耳朵,欢喜地蹦走。

Comment @coderabbitai help to get the list of available commands.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant