Paginator numerals don't refresh

[g012]

Current Behavior

Using 'showNumerals' on Paginator, when the page.size value is changed programmatically, the number of pages shown does not refresh. For example, I have a filter text and 6 items initially, with 5 items per page set. I type a filter text which reduces the number of entries to 2 - Paginator still displays 2 pages (<- 1 | 2 ->). Changing the number of entries per page in the UI forces it to recalculate correctly. The issue doesn't occur if 'showNumerals' is not used, the total number of items updates correctly in the text between the arrows.

Expected Behavior

The number of pages should update according to the new source length.

Steps To Reproduce

1. <Paginator bind:settings={page} showNumerals maxNumerals={1} />
2. Create a button, and in the on:click event set page.size to a lower value which should cause it to display one page less
3. Notice the page count doesn't reduce

Link to Reproduction / Stackblitz

No response

More Information

No response

[SebasF1349]

Maybe I'm missing something, but I followed your steps and I can't reproduce it

Can you share a Stackblitz with a minimal reproduction @g012 ?

[afterglowxyz]

I have actually ran into the same problem. When the size is set as a store writable, after updating the said stores data, the size is not updating. I tried to change from let page to $: page and this makes the size change upon update, but now none of the paginator buttons work.

[endigo9740]

@g012 @afterglowxyz

Svelte can be very particular about how objects and arrays are updated to trigger reactivity. I'd recommend reading this:

• https://svelte.dev/tutorial/updating-arrays-and-objects

Notably:

Can you confirm the data is being updated per Svelte's requirements here?

[nazihahmed]

here is what i did to fix this issue:

$: {
    pageSettings = {
    offset: currentPage - 1,
    limit: limit,
    size: count,
    amounts: [10, 20, 50, 100]
    };
    // trigger reactive update
    pageSettings = pageSettings;
}

hope this helps someone!

[afterglowxyz]

Hey @nazihahmed,

I'm having hard time implementing your fix, do you mind showing the full code of the paginator, please?

Much appreciated 🙏🏻

[endigo9740]

@nazihahmed @afterglowxyz I appreciate the comments, but I believe the original issue was addressed in my comment above: https://github.com/skeletonlabs/skeleton/issues/1775#issuecomment-1666130100

Again, Svelte is very particular about how the data is updated in order to trigger reactivity. Dropping a store into the object is NOT going to provide the expected results here. If you need the object to update reactivity when a store updates, you'll need to listen to the store with the $someStore.update() method, then update the object as described above.