fix(pagination): support controlled page state - #694
Conversation
Keep the selected page synchronized with consumers while allowing pagination controls to wrap on narrow screens. Co-authored-by: Cursor <cursoragent@cursor.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b93d0d2eeb
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| }); | ||
| const current = ref(1); | ||
| const current = ref(props.page); | ||
| watch(() => props.page, (page) => (current.value = page)); |
There was a problem hiding this comment.
When a controlled consumer keeps page unchanged—for example, because navigation is rejected or its request fails—gotoPage() still changes current, while this watcher never runs because the prop value did not change. The bar therefore highlights the attempted page even though the controlling state still points to the previous page. In controlled mode, avoid mutating the displayed selection independently of page, or restore it when the callback does not update the prop.
Useful? React with 👍 / 👎.
1 participant
This pull request updates the
PaginationBar.vuecomponent to improve its reactivity and styling. The main changes ensure that the current page state stays in sync with thepageprop and enhances the pagination bar's appearance.Reactivity improvements:
currentpage state is now initialized from thepageprop, and awatchis added to keepcurrentin sync if thepageprop changes.Styling enhancements:
btn-groupclass.Keep the selected page synchronized with consumers while allowing pagination controls to wrap on narrow screens.