From 078cf373af5620b749f4ce728e48dd55812a0908 Mon Sep 17 00:00:00 2001
From: Alex Iglesias <alexiglesias@finsweet.com>
Date: Tue, 6 Jan 2026 20:19:26 +0100
Subject: [PATCH] fix: force a pagination hook trigger when initializing
 non-CMS pagination

---
 .changeset/funny-pugs-jog.md         |  5 +++++
 packages/list/src/components/List.ts |  7 ++++++-
 packages/list/src/load/infinite.ts   | 12 ++++++++----
 packages/list/src/load/more.ts       | 12 ++++++++----
 packages/list/src/load/pagination.ts | 18 +++++++++++-------
 5 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/funny-pugs-jog.md

diff --git a/.changeset/funny-pugs-jog.md b/.changeset/funny-pugs-jog.md
new file mode 100644
index 000000000..57a4bcf8a
--- /dev/null
+++ b/.changeset/funny-pugs-jog.md
@@ -0,0 +1,5 @@
+---
+'@finsweet/attributes-list': patch
+---
+
+fix: force a pagination hook trigger when initializing non-CMS pagination
diff --git a/packages/list/src/components/List.ts b/packages/list/src/components/List.ts
index b01a70b28..02fd75228 100644
--- a/packages/list/src/components/List.ts
+++ b/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);
     };
diff --git a/packages/list/src/load/infinite.ts b/packages/list/src/load/infinite.ts
index f755b13a7..313ae8cb1 100644
--- a/packages/list/src/load/infinite.ts
+++ b/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);
diff --git a/packages/list/src/load/more.ts b/packages/list/src/load/more.ts
index be910a695..c2f458265 100644
--- a/packages/list/src/load/more.ts
+++ b/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);
diff --git a/packages/list/src/load/pagination.ts b/packages/list/src/load/pagination.ts
index c32d49dc0..935be5248 100644
--- a/packages/list/src/load/pagination.ts
+++ b/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,