Expose event to onChange callback

[jbadan]

Would you accept a pr that exposes the click event to the callback for onChange?

https://github.com/ultimate-pagination/react-ultimate-pagination/blob/master/src/react-ultimate-pagination.js#L9

It makes it easier for the consumer to handle state and gives more flexibility. Something like onChange(value, event), so as to not make a breaking change.

[kachkaev]

👋 @jbadan have you found a workaround for this issue by any chance?

I have a pagination component with renders Next.js links, each pointing to URLs like /current-url?p=42. When a link is clicked, I disable the whole pagination component, wait for Next.js to reload the page and re-enable it the component again. All works well except in cases when a user ctrl-clicks on a link.

When a new page is opened in a different tab, onChange with a new page value still fires but there is no easy way me to tell if we’re navigating to a new page in the current tab or not. Thus, the component ends up disabled forever because it waits for the new URL to eventually load, but this does not happen.

[kachkaev]

UPD: Looks like I found a solution. Instead of passing Pagination’s onClick straight down to <Link />, I have added a custom handler which stops the event from firing upwards when a modifier key is pressed:

  // Prevent pagination onChange event from firing when a link is opened in a new tab. Context:
  // https://github.com/ultimate-pagination/react-ultimate-pagination/issues/22#issuecomment-1644667936
  const handleClick = React.useCallback(
    (event: React.MouseEvent) => {
      if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
        return
      }

      onClick()
    },
    [onClick],
  )