[BUG] - Pagination - PaginationItemType.DOTS default functionality being overwritten when using renderItem

[jmitchell9713]

NextUI Version

2.2.9

Describe the bug

So for the Pagination component, when I use renderItem but remove the checks for PaginationItemType.DOTS, it appears the default functionality of the dots (forward icon display on hover, jump to x number of pages) is being overwritten. When I add the renderItem code as suggested in the docs, it replaces the ellipsis icon "..." with "dots", does not display the forwardicon ">>" on hover, and does nothing onClick. Been trying to figure this out for several hours but no luck. Been reading into the docs on topics like slots and data attributes but haven't been able to figure out how to get this to work. Any guidance would be appreciated.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. create pagination component
2. add renderItem logic found in code at https://nextui.org/docs/components/pagination#custom-items
3. remove check for value === PaginationItemType.DOTS
4. see screenshots for what to look for in dev env

Expected behavior

I would expect the default dots/forwardicon behavior to be maintained if I am not changing how these are rendered in renderItem

Screenshots or Videos

Operating System Version

macOS

Browser

Chrome

[romanticsoul]

try to use <button...>{children}<button/> instead of <button...>{value}<button/>

[MuhammadUlBakir]

here the solution hope it works. ` const handleRenderPaginationItem = ({ ref, key, value, index, activePage, className, setPage, }) => {

// Handle clickable ellipsis
if (value === PaginationItemType.DOTS) {
  const isBefore = index < activePage;
  const jumpTo = isBefore
    ? Math.max(activePage - 3, 1)
    : Math.min(activePage + 3, totalPages);

  if (updateUrl) {
    return (
      <Link
        href={handleTransformUrl(jumpTo)}
        key={key}
        ref={ref}
        className={className}
        onClick={() => setPage(jumpTo)}
      >
        ...
      </Link>
    )
  };

  return (
    <button
      key={key}
      ref={ref}
      className={className}
      onClick={() => setPage(jumpTo)}
    >
      ...
    </button>
  )
}

// Handle numbered page items
if (typeof value === 'number') {
  if (updateUrl) {
    return (
      <Link
        key={key}
        href={handleTransformUrl(value)}
        ref={ref}
        className={className}
        onClick={() => setPage(value)}
      >
        {value}
      </Link>
    );
  }

  return (
    <button
      key={key}
      ref={ref}
      className={className}
      onClick={() => setPage(value)}
    >
      {value}
    </button>
  );
}

return null;

};`