Skip to content

Conversation

@luannmoreira
Copy link
Member

Description

This PR improves the behavior of the items-per-page combobox in the DataTable component by:

  • Adding reactive state tracking for the menu's open/close state.
  • Deferring input sanitization until the menu closes, instead of on every blur or keypress.
  • Avoiding unnecessary pagination resets when the entered value hasn’t changed.

Motivation

Previously, the input would trigger sanitizeItemsPerPage() and reset to page 1 on any blur, even if the value hadn’t changed. This was disruptive to the user experience when interacting with the dropdown.

  • This update ensures:
    • Sanitization happens only once, after the menu closes.
    • Pagination is reset only when the value actually changes.

Changes

  • Bound v-model:menu to track combobox open state.
  • Added @update:menu to handle menu close and trigger validation.
  • Introduced itemsPerPageMenuOpen ref.
  • Updated logic to prevent redundant calls to goToFirstPage().

Testing

  • Manually tested:

    • Selecting preset values from the dropdown.
    • Entering custom numeric values.
    • Leaving the input blank or entering invalid input.
    • Verifying page reset only occurs on value change.

Add reactive menu state and blur behavior to sanitize custom input
only when the combobox menu closes. Prevents unnecessary page resets
when value remains unchanged.
@luannmoreira luannmoreira self-assigned this Dec 8, 2025
@luannmoreira luannmoreira requested a review from a team as a code owner December 8, 2025 21:54
@gustavosbarreto gustavosbarreto merged commit 0c14c17 into master Dec 9, 2025
16 checks passed
@gustavosbarreto gustavosbarreto deleted the feat/improve-items-per-page-handling branch December 9, 2025 18:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants