fix: force a pagination hook trigger when initializing non-CMS pagination (#774)

Author: alexiglesias93

.changeset/funny-pugs-jog.md

@@ -0,0 +1,5 @@
+---
+'@finsweet/attributes-list': patch
+---
+
+fix: force a pagination hook trigger when initializing non-CMS pagination

packages/list/src/components/List.ts

@@ -806,12 +806,17 @@ export class List {
    * Adds a hook.
    * @param key
    * @param callback
+   * @param options.forceTrigger Whether to trigger the hook immediately after adding it.
    */
-  addHook(key: HookKey, callback: HookCallback) {
+  addHook(key: HookKey, callback: HookCallback, { forceTrigger }: { forceTrigger?: boolean } = {}) {
     const hook = this.hooks[key];
 
     hook.callbacks.push(callback);
 
+    if (forceTrigger) {
+      this.triggerHook(key);
+    }
+
     return () => {
       hook.callbacks = hook.callbacks.filter((cb) => cb !== callback);
     };

packages/list/src/load/infinite.ts

@@ -18,10 +18,14 @@ export const initInfiniteMode = (list: List) => {
   const thresholdCoefficient = getInfiniteThreshold(list);
 
   // Add hook
-  list.addHook('pagination', (items) => {
-    const paginatedItems = items.slice(0, list.itemsPerPage.value);
-    return paginatedItems;
-  });
+  list.addHook(
+    'pagination',
+    (items) => {
+      const paginatedItems = items.slice(0, list.itemsPerPage.value);
+      return paginatedItems;
+    },
+    { forceTrigger: !list.paginationNextCMSElement.value && !list.paginationPreviousCMSElement.value } // Force a render if the list is static
+  );
 
   // Init
   loadPaginatedCMSItems(list);

packages/list/src/load/more.ts

@@ -13,10 +13,14 @@ import { loadPaginatedCMSItems } from './load';
  */
 export const initMoreMode = (list: List) => {
   // Add hook
-  list.addHook('pagination', (items) => {
-    const paginatedItems = items.slice(0, list.itemsPerPage.value);
-    return paginatedItems;
-  });
+  list.addHook(
+    'pagination',
+    (items) => {
+      const paginatedItems = items.slice(0, list.itemsPerPage.value);
+      return paginatedItems;
+    },
+    { forceTrigger: !list.paginationNextCMSElement.value && !list.paginationPreviousCMSElement.value } // Force a render if the list is static
+  );
 
   // Init
   loadPaginatedCMSItems(list);

packages/list/src/load/pagination.ts

@@ -29,16 +29,20 @@ export const initPaginationMode = async (list: List) => {
   if (!paginationWrapperElement) return;
 
   // Init hook
-  list.addHook('pagination', (items) => {
-    const $itemsPerPage = itemsPerPage.value;
+  list.addHook(
+    'pagination',
+    (items) => {
+      const $itemsPerPage = itemsPerPage.value;
 
-    const start = (currentPage.value - 1) * $itemsPerPage;
-    const end = start + $itemsPerPage;
+      const start = (currentPage.value - 1) * $itemsPerPage;
+      const end = start + $itemsPerPage;
 
-    const paginatedItems = items.slice(start, end);
+      const paginatedItems = items.slice(start, end);
 
-    return paginatedItems;
-  });
+      return paginatedItems;
+    },
+    { forceTrigger: !list.paginationNextCMSElement.value && !list.paginationPreviousCMSElement.value } // Force a render if the list is static
+  );
 
   const currentPageCleanup = watch(
     list.currentPage,