fix(pagination): active element incorrect position on first load #3346
Conversation
- Using useIntersectionObserver to check for visibility of active element - If active element is visible, calling scrollTo method
🦋 Changeset detectedLatest commit: 8baf2a7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@arindam1997007 is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe update introduces a patch for the Pagination component in the Changes
Sequence Diagram(s)Not applicable for these changes due to their simplicity and specific focus on fixing visibility issues. Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
|
Hi @wingkwong |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- .changeset/tricky-stingrays-relax.md (1 hunks)
- packages/components/pagination/package.json (1 hunks)
- packages/components/pagination/src/use-pagination.ts (4 hunks)
Additional comments not posted (4)
.changeset/tricky-stingrays-relax.md (1)
5-5: Clear and concise changeset description.The changeset description succinctly captures the essence of the fix and links it to the relevant issue.
packages/components/pagination/package.json (1)
47-47: New dependency added:@nextui-org/use-intersection-observer.Ensure that the version specified aligns with project standards and conduct a security audit on the new package to prevent potential vulnerabilities.
packages/components/pagination/src/use-pagination.ts (2)
19-19: Import added:useIntersectionObserver.The addition of the
useIntersectionObserverhook is aligned with the PR's objectives to manage the visibility of pagination elements effectively.
Line range hint
196-228: Significant changes to pagination visibility and interaction logic.The integration of the
useIntersectionObserverhook and the changes in thescrollTofunction enhance the component's responsiveness to visibility changes. Ensure comprehensive testing, especially for edge cases involving rapid visibility changes.Also applies to: 284-298
Verification successful
Comprehensive testing verified for pagination component
The test files related to the pagination component cover various aspects of its functionality, including state changes, rendering, and edge cases. The integration of the
useIntersectionObserverhook and changes in thescrollTofunction are likely well-tested.
packages/components/pagination/tests/pagination.test.tsScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify comprehensive testing of pagination component. # Test: Search for test files related to pagination component. Expect: Tests covering new changes. fd "pagination.*test.*" "packages/components/pagination/tests" --exec cat {}Length of output: 202
Script:
#!/bin/bash # Description: Locate test files related to the pagination component. # Test: Search for test files related to pagination component across the entire repository. fd "pagination.*test.*" --exec cat {}Length of output: 4822
wingkwong
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
Files selected for processing (1)
- .changeset/tricky-stingrays-relax.md (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- .changeset/tricky-stingrays-relax.md
Closes #3151
📝 Description
Fixed Active Element positionon on first load, when pagination is rendered initially with
display:hidden⛳️ Current behavior (updates)
On first load, instead of left arrow button, Page 1 active element is displayed
🚀 New behavior
Active Element position is fixed even on first load, using IntersectionObserver.
💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
According to code submitted by users which can be reproduced, issue occurs if pagination component is rendered using
display:hiddenfor the first time, and then switching todisplay:block.Using IntersectionObserver, checking for display of pagination componenet in the viewport, and then running the required functions.
fix-pagination.mov
Summary by CodeRabbit
display: hidden.useIntersectionObserverhook.