mis-crystal-design-system 18.1.9 → 18.1.10-test-1

package/fesm2022/mis-crystal-design-system-table.mjs

@@ -371,7 +371,21 @@ class TableComponent {
         // Pagination related variables
         this.pages = signal([]);
         this.tableLength = signal(0);
-        this.selectedPage = signal(1); // Internal state for selected page
+        this.selectedPage = signal(1); // Internal state for selected page - this is the source of truth
+        this.isInternalPageUpdate = false; // Flag to prevent effect from overwriting during user-initiated updates
+        /**
+         * LEGACY CODE WORKAROUND: Track user-initiated page selections to prevent config overwrites.
+         *
+         * Some legacy parent components don't update tableConfig.paginationConfig.selectedPage when
+         * the page changes. This causes the effect to overwrite user selections with stale config values.
+         *
+         * IDEAL SOLUTION: Parent components should always update config.selectedPage in their
+         * pageSelected event handler. This workaround protects user actions until legacy code
+         * can be updated.
+         *
+         * TODO: Remove this workaround once all parent components properly update config.selectedPage
+         */
+        this.userSelectedPage = null;
         this.pageSelected = output();
         this.pageSizeChanged = output();
         this.pageSizeOptions = computed(() => {
@@ -417,14 +431,49 @@ class TableComponent {
             // --- PAGINATION PAGE ARRAY LOGIC (MOVED/REPLACED initializePagination) ---
             const len = config?.paginationConfig?.noOfPages;
             const disablePageJumping = config?.paginationConfig?.disablePageJumping;
-            // Sync selectedPage from config if provided (for when parent updates the page)
-            if (config?.paginationConfig?.selectedPage !== undefined && config?.paginationConfig?.selectedPage !== null) {
-                const configSelectedPage = config.paginationConfig.selectedPage;
-                // Only update if different to avoid unnecessary updates
-                if (this.selectedPage() !== configSelectedPage) {
-                    this.selectedPage.set(configSelectedPage);
+            /**
+             * LEGACY CODE WORKAROUND: Protect user-initiated page selections from config overwrites.
+             *
+             * When users click pagination arrows, we update internal state immediately. However,
+             * some legacy parent components don't update config.selectedPage, causing the effect
+             * to run with stale config values that would overwrite the user's selection.
+             *
+             * Strategy: Treat internal state as source of truth for user-initiated changes.
+             * Only sync from config when it's safe (not a user-selected page).
+             *
+             * IDEAL: Parent should always update config.selectedPage in pageSelected handler.
+             */
+            const currentSelectedPage = this.selectedPage();
+            const configSelectedPage = config?.paginationConfig?.selectedPage;
+            const isUserSelectedPage = this.userSelectedPage !== null && currentSelectedPage === this.userSelectedPage;
+            if (!this.isInternalPageUpdate) {
+                // Only sync from config if:
+                // 1. Config has a selectedPage value
+                // 2. Current page is NOT a user-initiated selection (protect user actions)
+                // 3. Config value is valid and different from current
+                if (configSelectedPage !== undefined && configSelectedPage !== null && !isUserSelectedPage) {
+                    const maxPages = config?.paginationConfig?.noOfPages || 1;
+                    if (currentSelectedPage !== configSelectedPage &&
+                        configSelectedPage >= 1 &&
+                        configSelectedPage <= maxPages) {
+                        this.selectedPage.set(configSelectedPage);
+                    }
+                }
+                // If config doesn't have selectedPage, only initialize invalid state
+                // Never reset a valid page number, especially user-selected ones
+                if ((configSelectedPage === undefined || configSelectedPage === null) &&
+                    !isUserSelectedPage &&
+                    (currentSelectedPage === 0 || currentSelectedPage < 1)) {
+                    this.selectedPage.set(1);
+                }
+                // Clear user selection tracking when config matches user's selection
+                // This indicates parent has updated config correctly
+                if (configSelectedPage === this.userSelectedPage) {
+                    this.userSelectedPage = null;
                 }
             }
+            // Reset the flag after processing
+            this.isInternalPageUpdate = false;
             // Only run if pagination is configured and page jumping is enabled
             if (len && len > 0 && !disablePageJumping) {
                 // Read the internal state of the selected page for calculating the pages array.
@@ -645,7 +694,19 @@ class TableComponent {
         // Guard clause to prevent out-of-range updates
         if (pageNumber < 1 || pageNumber > this.tableConfig().paginationConfig.noOfPages)
             return;
-        // Update internal selectedPage state immediately
+        /**
+         * LEGACY CODE WORKAROUND: Track user-initiated page selection.
+         *
+         * We track this to prevent the effect from overwriting user selections when
+         * legacy parent components don't update config.selectedPage. The effect will
+         * skip syncing from config while this page is marked as user-selected.
+         *
+         * IDEAL: Parent should update config.selectedPage in pageSelected handler.
+         * Once all parents do this, we can remove userSelectedPage tracking.
+         */
+        this.isInternalPageUpdate = true;
+        this.userSelectedPage = pageNumber;
+        // Update internal state immediately - this is the source of truth
         this.selectedPage.set(pageNumber);
         // Reset header checkbox when navigating to a different page
         this.selectAllCheckbox.set(false);
@@ -662,7 +723,7 @@ class TableComponent {
                 this.pages.set([1, 0, len - 3, len - 2, len - 1, len]);
             }
         }
-        // Emit to parent so they can update their config
+        // Emit to parent - they may or may not update config, but we protect our state
         this.pageSelected.emit(pageNumber);
     }
     // Main container related functions