Table pagination not working on React 19

Polaris
1

Hello,

When using React 19, I can’t seem to make pagination work (note that I am also using the trick outlined here: Is there an easy way to migrate Polaris UI incrementally? · Issue #23 · Shopify/shopify-app-template-react-router · GitHub to both use new and older Polaris).

The code:

<s-table 
          paginate={ true } 
          hasNextPage={ true } 
          hasPreviousPage={ true }
          onNextPage={ () => alert('Next') }
          onPreviousPage={ () => alert('Prev') }
          loading={ state === 'loading' }
        >
          <s-table-header-row>
            <s-table-header listSlot="primary">Name</s-table-header>
          </s-table-header-row>
          <s-table-body>
            <s-table-row>
                  <s-table-cell>Foo</s-table-cell>
                </s-table-row>
          </s-table-body>
        </s-table>

Clicking on the next/prev button will never trigger the callback in React 19.

Thanks.

1 Like
2

Hey @bakura10, thanks again for reaching out.

Can you confirm the exact version/build of app-bridge-ui-experimental.js you’re loading, and that it’s included only once/loading is false when clicking, since the table can be inert while loading is true?

Also, are you mixing older Polaris React with newer Polaris web components via the incremental migration trick, and if so, which versions are in play?

If you’re using https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js, I’d just double check to see if the runtime us updated and set @shopify/app-bridge-ui-types to “latest” in package.json? If you can also share the emitted events from the element (via a ref) here, that would be super helpful to see whether the component fires nextpage/previouspage or camelCase nextPage/previousPage.

If upgrading isn’t possible for you right now, as a workaround could you try attaching listeners with addEventListener for both nextpage/previouspage and nextPage/previousPage and share what fires there? Happy to dig into this further with you for sure!

3

Hello,

I’m using latest version of everything, and this is interesting.

I actually made it work if I use lowercase. This is working:

 <s-table onnextpage={ onNextPage }>

but this is not working:

 <s-table onNextPage={ onNextPage }>

However app brdige types complains when written in lowercase:

image

Also, this is not how it is documented:

image
image1238×252 55.7 KB

On React 18, it seems to work properly when using camelCase, but on React 19 it requires lowecase.

Hope this helps! :slight_smile:

4

Glad to see that you have solved it by yourself!

I have an example of a data table complete with pagination and search here, if you need another example: Browse Blocks - Polaris Blocks

5

No it’s not working as documented on React 19

6

Hey @bakura10, thanks for digging into this and sharing the workaround, that is definitely odd. I’d say for now it’s likely safe to use the lowercase formatting there, but I’ll touch base with the Polaris product team to report this and confirm expected behaviour.

I’ll loop back with you once I have more info, appreciate you flagging this as always!

8

My example is using React 19. I noticed my code example on the site wasn’t showing the correct source code. But now it does.

My example does not use lowercase formatting, so I’m not sure that’s the issue.

9

Thanks @hackervincent for the followup here and the extra info. Just wanted to ping you and @bakura10 here with an update. I was able to touch base with the product team and we’re investigating this as a potential bug. Can’t guarantee a turnaround time or what the fix will look like at the moment, but I’ll keep an eye on things and update you once the fix has been pushed/when I have next steps.

Thanks again for flagging this!

11

@Alan_G the issue seems to be actually widespread to everything. The onChange / onInput are also not called in React 19 + React router template. You have to use the all lowercase variation everywhere.

12

Thanks @bakura10, I’ll share this with the team, appreciate you following up here. I’ll keep you folks up to date on this and loop back here once I have more info.

13

We’ve pushed an update to the CDN that should allow you to use onNextPage in React 19. Let me know if that’s working for you?

14

I can confirm this now works on React 19, thanks!

2 Likes