influxdata / influxdata/clockface

PaginationNav enablePageInput does not alter current page

Open
#881 0 comments 0 reactions 0 assignees View on GitHub
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.

![Screen Shot 2022-10-27 at 3 45 27 PM](https://user-images.githubusercontent.com/91283923/198384041-e0705c4b-27f8-4357-aa10-a38e8bedb313.png)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.