🐛 Fix pagination buttons not disabled when prop set + resolve errors when multiple paginate listen events are present

Author: Frontendland

src/components/Carousel/Carousel.astro

@@ -152,6 +152,11 @@ const style = visibleItems > 1
     listen('paginate', event => {
         const target = event.target
         const carousel = target.closest('section').querySelector('[data-id="w-carousel"] ul')
+
+        if (!carousel) {
+            return
+        }
+
         const progress = target.closest('section').querySelector('.w-carousel-progress')
         const progressValue = (100 / (Number(target.dataset.totalPages) - 1))
         const visibleItems = Number(carousel.dataset.visibleItems) || 0

src/components/DataTable/DataTable.astro

@@ -313,6 +313,10 @@ const hasPagination = data?.length && itemsPerPage
             .closest('section')
             .querySelector('table')
 
+        if (!table) {
+            return
+        }
+
         const tableRows = Array.from(table.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>)
 
         table.dataset.page = event.page

src/components/Pagination/Pagination.astro

@@ -71,7 +71,7 @@ const generatedPages = pages?.length
         <li>
             <Button
                 disabled={disablePrevious || (calculatedCurrentPage === 1 && !previousLink)}
-                href={previousLink}
+                href={!disablePrevious ? previousLink : undefined}
                 theme={theme}
                 data-page="prev"
             >
@@ -103,7 +103,7 @@ const generatedPages = pages?.length
         <li>
             <Button
                 disabled={disableNext || (calculatedCurrentPage === calculatedTotalPages && !nextLink)}
-                href={nextLink}
+                href={!disableNext ? nextLink : undefined}
                 theme={theme}
                 data-page="next"
             >

src/components/Pagination/Pagination.svelte

@@ -82,8 +82,8 @@
     {:else}
         <li>
             <Button
-                disabled={disablePrevious || (calculatedCurrentPage === 1 && !previousLink)}
-                href={previousLink}
+                disabled={(disablePrevious || (calculatedCurrentPage === 1 && !previousLink)) ? true : null}
+                href={!disablePrevious ? previousLink : undefined}
                 theme={theme}
                 onClick={!(disablePrevious || (calculatedCurrentPage === 1 && !previousLink))
                     ? () => paginate('prev')
@@ -124,8 +124,8 @@
         {/if}
         <li>
             <Button
-                disabled={disableNext || calculatedCurrentPage === calculatedTotalPages}
-                href={nextLink}
+                disabled={(disableNext || calculatedCurrentPage === calculatedTotalPages) ? true : null}
+                href={!disableNext ? nextLink : undefined}
                 theme={theme}
                 onClick={!disableNext
                     ? () => paginate('next')

src/components/Pagination/Pagination.tsx

@@ -100,7 +100,7 @@ const Pagination = ({
                     <li>
                         <Button
                             disabled={disablePrevious || (calculatedCurrentPage === 1 && !previousLink)}
-                            href={previousLink}
+                            href={!disablePrevious ? previousLink : undefined}
                             theme={theme}
                             onClick={!(disablePrevious || (calculatedCurrentPage === 1 && !previousLink))
                                 ? () => paginate('prev')
@@ -140,7 +140,7 @@ const Pagination = ({
                     <li>
                         <Button
                             disabled={disableNext || calculatedCurrentPage === calculatedTotalPages}
-                            href={nextLink}
+                            href={!disableNext ? nextLink : undefined}
                             theme={theme}
                             onClick={!disableNext
                                 ? () => paginate('next')