Skip to content

fix(site-components): initialize backtop visibility on connect - #951

Open
PointerL wants to merge 1 commit into
Tencent:mainfrom
PointerL:fix/site-backtop-initial-visibility
Open

PointerL wants to merge 1 commit into
Tencent:mainfrom
PointerL:fix/site-backtop-initial-visibility

Conversation

@PointerL

Copy link
Copy Markdown

🤔 What kind of change does this PR introduce?

  • Bug fix
  • Component interaction improvement
  • Tests

🔗 Related Issue

Self-discovered bug. No matching issue or fix PR was found during the pre-submission search.

💡 Background and solution

td-backtop registers a scroll listener when connected but does not initialize its visibility from the current scroll position. If it is mounted after the page has already scrolled, the button remains hidden until another scroll event occurs.

Call the existing visibility update function once after registering the listener. This also refreshes visibility when the same element reconnects. The visibility threshold, scroll listener cleanup and click-to-scroll behavior remain unchanged.

Reproduction

  1. Scroll a page to 400 px and let the scroll event finish.
  2. Mount a td-backtop element without scrolling again.
  3. Before this fix, the button is hidden. After this fix, it is visible as soon as the component connects.

The screenshots use a minimal page importing the real Web Component, with no synthetic scroll event dispatched after mounting. They record actual scroll position, component state and computed button visibility.

Before After
Backtop remains hidden when mounted at 400 px Backtop is visible when mounted at 400 px

Validation

  • The initial-visibility tests fail against the original implementation and pass after the fix.
  • Added 3 tests covering an already-scrolled page, initialization at the top, subsequent scroll events, listener cleanup and reconnection.
  • pnpm run test: 6 files, 13 tests passed, with coverage.
  • pnpm run typecheck, pnpm run lint and pnpm run build passed in packages/site-components, including Less compilation.
  • Prettier and git diff --check passed.
  • Browser check with the real Hybrids element confirmed visibility immediately after mounting at 400 px. Clicking the button still returns to the top and hides it.

📝 Changelog

  • fix(site-components): Initialize Backtop visibility from the current scroll position when the element connects.

  • This PR does not need a changelog entry.

☑️ Checklist before requesting a merge

  • Documentation has been updated or is not required.
  • A demo has been provided or is not required.
  • TypeScript definitions have been updated or are not required.
  • A changelog entry has been provided or is not required.

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