Skip to content

PaginationNav enablePageInput does not alter current page #881

@wdoconnell

Description

@wdoconnell

Describe the bug
The enablePageInput property of <PaginationNav> is supposed to display a box that lets the user navigate to an arbitrary page in a paginated portion of the UI. It looks like this.

Screen Shot 2022-10-27 at 3 45 27 PM

This property isn't used in the UI at the moment, but I'd like to use it. The enablePageInput property doesn't work because it just changes the apparently selected page without invoking the callback function passed in from the UI, which is what's used to alter what is displayed on the page (see video).

The root cause is the onInputButtonClick function. When the 'go' button associated with enablePageInput is clicked, the component runs setActivePage(inputPage). The changes the highlighted page to the newly selected page, but doesn't cause the other intended effects in the UI. It needs to be doing the same thing that the moveToPage function does - invoke onChange so that the associated UI callback is run.

To Reproduce
Steps to reproduce the behavior:

  1. Go to any page using pagination (e.g., Load Data / API Tokens)
  2. Change the enablePageInput property of that PaginationNav to true
  3. Enter or click a new number
  4. The 'selected' page changes, but items do not re-render because the component doesn't call the onChange function.

Expected behavior
Hitting 'Go' in pagination nav should take the user to a different page of paginated items.

Screenshots
Pagination nav does change pages when user clicks arrows or pagination numbers

Screen.Recording.2022-10-27.at.3.37.39.PM.mov

Pagination nav does not change pages when user hits 'go' given a page number

Screen.Recording.2022-10-27.at.3.37.57.PM.mov

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions