react-paginate
react-paginate copied to clipboard
'Next' skips to end when moving right
The navigation bar doesn't work properly for me. If I am going backwards, counting down, everything works as intended. But when I start from 1 and hit next repeatedly, it skips from 6 to the last page. I am working from the demo with absolutely no changes. I followed the steps exactly as the npm page directs under the demo label.
I am having the same problem.
Could you capture your screen to show us please?
Hi! I just tried to reproduce the behaviour, but I am currently unable to do so. Maybe it just had been caused by the mouse click being captured in the wrong field after the last field jumps to the right? If I am able to reproduce the behaviour I will post a screen capture.
Hi! I just tried to reproduce the behaviour, but I am currently unable to do so. Maybe it just had been caused by the mouse click being captured in the wrong field after the last field jumps to the right?
Ok. Yes, probably. This is what I was thinking. Because, indeed, there is a jump to the right between page 5 and page 6 in the demo...
May be related #222 #300.
The issue appears between the 4 to 5 page switch.

At 5, we have one more page displayed; thus if we continue to spam the Next button, we involuntarily click the page 20.
To really tackle this issue, we'll need an algorithm and parameters that generate the same number of controls whatever the current page. This won't be easy considering how the default pagination scheme (the number of controls can change a lot, see another capture below).

I think a proper solution to this issue is adequate styling of the Next / Prev controls. We could try to add space between the page numbers and the previous / next controls, so that a change in the number of pages won't move the previous / next controls. However this is not easy with the current DOM structure (with previous / next flattened with page numbers / under the same parent <ul>)
We could try a change in the DOM for that in the v8.
Any suggestion is welcome.