influxdata / influxdata/clockface
PaginationNav enablePageInput does not alter current page
- Dominant language
- TypeScript
- Stars
- 46
- Forks
- 18
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 1
Description
**Describe the bug**
The `enablePageInput` property of `` 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.

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
Contributor guide
Research direction
Start at the PaginationNav component and inspect its onInputButtonClick function alongside moveToPage. Verify that submitting a page through enablePageInput updates the displayed paginated items, not only the highlighted page, and confirm the existing arrow and page-number behavior remains unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100