react-paginate icon indicating copy to clipboard operation
react-paginate copied to clipboard

'Next' skips to end when moving right

Open dwaynedraper opened this issue 4 years ago • 7 comments
trafficstars

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.

dwaynedraper avatar Apr 30 '21 12:04 dwaynedraper

I am having the same problem.

ho-tell avatar Sep 23 '21 15:09 ho-tell

Could you capture your screen to show us please?

AdeleD avatar Oct 12 '21 19:10 AdeleD

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.

ho-tell avatar Oct 12 '21 20:10 ho-tell

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...

AdeleD avatar Oct 12 '21 20:10 AdeleD

May be related #222 #300.

MonsieurV avatar Nov 03 '21 19:11 MonsieurV

The issue appears between the 4 to 5 page switch.

image image

At 5, we have one more page displayed; thus if we continue to spam the Next button, we involuntarily click the page 20.

MonsieurV avatar Nov 03 '21 19:11 MonsieurV

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).

image

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.

MonsieurV avatar Nov 03 '21 19:11 MonsieurV