influxdata / clockface

UI Kit for building Chronograf
https://influxdata.github.io/clockface
MIT License
43 stars 18 forks source link

PaginationNav enablePageInput does not alter current page #881

Open wdoconnell opened 1 year ago

wdoconnell commented 1 year ago

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

https://user-images.githubusercontent.com/91283923/198382962-c54b2822-468f-484a-ae33-27505c5629de.mov

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

https://user-images.githubusercontent.com/91283923/198382872-4546d5ba-1da7-422e-bb5b-ce4d8fd4947c.mov