SolidJS•7mo ago

Pagination range not being updated

Hey all. I'm totally stuck and reaching out for some help. (see video below) I have a paginated component which seems to have all it's values updating. But somewhere reactivity is breaking at a crucial point and thus the whole component doesn't work. For whatever reason, the For loop in PaginationItems is not re-rendering. If someone can take a quick look and point me in the right direction. I'd really appreciate it.
Thanks! The use-pagination hook which drives it is here: https://github.com/paulm17/mantinesolid/blob/main/packages/%40mantine/hooks/src/use-pagination/use-pagination.ts Pagination.tsx: https://github.com/paulm17/mantinesolid/blob/main/packages/%40mantine/core/src/component/Pagination/Pagination.tsx PaginationRoot.tsx: https://github.com/paulm17/mantinesolid/blob/main/packages/%40mantine/core/src/component/Pagination/PaginationRoot/PaginationRoot.tsx PaginationItems.tsx: https://github.com/paulm17/mantinesolid/blob/main/packages/%40mantine/core/src/component/Pagination/PaginationItems/PaginationItems.tsx PaginationEdges.tsx: https://github.com/paulm17/mantinesolid/blob/main/packages/%40mantine/core/src/component/Pagination/PaginationEdges/PaginationEdges.tsx PaginationDots.tsx: https://github.com/paulm17/mantinesolid/blob/main/packages/%40mantine/core/src/component/Pagination/PaginationDots/PaginationDots.tsx PaginationControl.tsx: https://github.com/paulm17/mantinesolid/blob/main/packages/%40mantine/core/src/component/Pagination/PaginationControl/PaginationControl.tsx Pagination.context.ts: https://github.com/paulm17/mantinesolid/blob/main/packages/%40mantine/core/src/component/Pagination/Pagination.context.ts

13 Replies

REEEEE•7mo ago

Just to sanity check, replace the ternary in the For with a Show component instead

PaulOP•7mo ago

I've tried that. That did not yield any difference. What I did was similar to:

<For each={ctx.range()}>
  {page => 
     <Show when={page !== dots} fallback={dots}>
       <Pagination Component>
     </Show>
  }

<For each={ctx.range()}>
  {page => 
     <Show when={page !== dots} fallback={dots}>
       <Pagination Component>
     </Show>
  }

REEEEE•7mo ago

Okay, then I think you should make ctx.range into another function such that the context value is defined as range: () => pagination().range()

PaulOP•7mo ago

So just to clarify, within context: Change:

range: Accessor<(number | 'dots')[]>;

range: Accessor<(number | 'dots')[]>;

to:

range: () => (number | 'dots')[];

range: () => (number | 'dots')[];

REEEEE•7mo ago

It can stay Accessor but the place where you define the value should change

PaulOP•7mo ago

Ok, I'll try in a bit. I've decided to simplify the refs in the polymorphic-factory and factory into exposing just props. So in the middle of changing all the components 😩 Finally changed all of them. 😮‍💨 I made the change to the range param. But still the same issue.

REEEEE•7mo ago

I don't see any immediate issues besides this which could possibly cause an issue

REEEEE•7mo ago

I would try to remove the memo and make usePagination take in Accessor for each property instead I think the pagination object is getting recreated constantly and it's breaking something

PaulOP•7mo ago

const pagination = usePagination({
    page: () => local.value!,
    initialPage: () => local.defaultValue!,
    onChange: local.onChange,
    total: () => local.total,
    siblings: () => local.siblings!,
    boundaries: () => local.boundaries!,
  });

const pagination = usePagination({
    page: () => local.value!,
    initialPage: () => local.defaultValue!,
    onChange: local.onChange,
    total: () => local.total,
    siblings: () => local.siblings!,
    boundaries: () => local.boundaries!,
  });

same result unfortunately.

REEEEE•7mo ago

If the createEffects are logging, I don't see what else could be the issue 🤔

PaulOP•7mo ago

I'll leave this open for now. I'm going to do comboBox tomorrow and then the components derived from that and I have finished all except those components which need the react float-ui. Which I will then port over the interactions and other types to support them. So I think next week or week after the latest to be done with the mantine port? 🤔

REEEEE•7mo ago

Nice, looking good

bigmistqke•6mo ago

Nice, good choice

Gaming

Programming

Pagination range not being updated

Did you find this page helpful?