Nesting PaginationLink/PaginationPrevious/PaginationNext inside PaginationItem produces nested li elements

[dngpng]

The Issue

The example given in the docs for Pagination component wraps PaginationLink / PaginationPrevious / PaginationNext components with a PaginationItem. However the code for PaginationLink actually already wraps the content inside a PaginationItem, the example will therefore result in a nested PaginationItems (meaning nested li-elements) -- this will lead to React reporting an error during rendering.

Possible Solutions

1. Do not internalize PaginationItem inside a PaginationLink, this way we will have a uniform behavior when constructing a Pagination tree.

2. Fix the example in the doc so that PaginationLink / PaginationPrevious / PaginationNext are used directly without being wrapped (again) in a PaginationItem

[plsankar]

Yes, can confirm it produces nested li tags.

[stathis1998]

I have the same issue. I will try and make a PR.

[HR555]

Any update on this ?

Currently as a workaround, I have replaced the PaginationLink with custom PaginationButton components. That solves the problem for now.

css
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9"

[stathis1998]

Any update on this ?

Currently as a workaround, I have replaced the PaginationLink with custom PaginationButton components. That solves the problem for now.

css
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9"

This has been resolved if I am not mistaken. It was merged on another's guy PR.

[HR555]

Yes, #2416

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.