[IndexTable] is not showing selectedItemsCount in Remix

[aikyahd]

Summary

None of the examples from the IndexTable is displaying selected text or number acually anything.

I'm trying this in my Remix with Polaris app.
I also checked that the allResourcesSelected is always false.
const { selectedResources, allResourcesSelected, handleSelectionChange } = useIndexResourceState(orders);

I don't think my code will make any difference, since all of the examples seems to have the same problem but here it is,

import React from 'react';
import { Card, IndexTable, Layout, useIndexResourceState } from '@shopify/polaris';

export default function ExampleListItems() {
    const orders = [
        {
            id: '1020',
            order: '#1020',
            date: 'Jul 20 at 4:34pm',
        },
        {
            id: '1021',
            order: '#1021',
            date: 'Jul 20 at 4:34pm',
        },
        {
            id: '1022',
            order: '#1022',
            date: 'Jul 20 at 4:34pm',
        },
    ];

    const resourceName = {
        singular: 'order',
        plural: 'orders',
    };

    const {
        selectedResources,
        allResourcesSelected,
        handleSelectionChange,
    } = useIndexResourceState(orders);

    const rowMarkup = orders.map(({ id, order, date }, index) => (
        <IndexTable.Row
            id={id}
            key={id}
            selected={selectedResources.includes(id)}
            position={index}
        >
            <IndexTable.Cell>{order}</IndexTable.Cell>
            <IndexTable.Cell>{date}</IndexTable.Cell>
        </IndexTable.Row>
    ));

    return (
        <Layout>
            <Layout.Section>
                <Card>
                    <IndexTable
                        resourceName={resourceName}
                        itemCount={orders.length}
                        selectedItemsCount={
                            allResourcesSelected ? 'All' : selectedResources.length
                        }
                        onSelectionChange={handleSelectionChange}
                        headings={[
                            { title: 'Order' },
                            { title: 'Date' },
                        ]}
                    >
                        {rowMarkup}
                    </IndexTable>
                </Card>
            </Layout.Section>
        </Layout>
    );
}

and since it's a local React app, here's the index.js and app.js files also,

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { AppProvider } from '@shopify/polaris';
import '@shopify/polaris/build/esm/styles.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AppProvider>
      <App />
    </AppProvider>
  </React.StrictMode>
);

and /src/App.js

import React from 'react';
import { Page, BlockStack } from '@shopify/polaris';
// import NewDiscountForm from './NewDiscountForm';
import DiscountList from './DiscountList';

export default function App() {
  return (
    <Page>
      <BlockStack gap={500}>
        <ExampleListItems />
      </BlockStack>
    </Page>
  );
}

My environment details

System:
   OS: macOS 14.6.1
   CPU: (8) arm64 Apple M3
   Memory: 129.25 MB / 8.00 GB
   Shell: 5.9 - /bin/zsh
 Binaries:
   Node: 22.7.0 - /opt/homebrew/bin/node
   npm: 10.8.2 - /opt/homebrew/bin/npm
 Browsers:
   Chrome: 128.0.6613.113
   Safari: 17.6
 npmPackages:
   @shopify/polaris: ^13.9.0 => 13.9.0 
   react: ^18.3.1 => 18.3.1 
   react-dom: ^18.3.1 => 18.3.1 

Expected behavior

Should display the selected text like -
1 selected
2 selected
...
All

Actual behavior

selectedItemsCount is always empty, not displaying anything at all.

Steps to reproduce

Link to sandbox
1.
2.
3.

Are you using React components?

Yes

Polaris version number

13.9.0

Browser

Chrome

Device

MacBook

[clydesantiago]

I'm having the same issue even on Polaris 12 version. Any solutions so far?

[clydesantiago]

Adding <AppProvider i18n={en}>......</AppProvider> resolves the issue.