[Page Actions] not collapsing into more actions on initial render

[perrupa]

Issue summary

Page actions don't collapse into "More actions" on initial render. This is causing layout issues when a page has many actions.

If a re-render is triggered (e.g. by a resize), the component collapses the actions into "more actions" as expected.

Expected behavior

Component will render and hide actions in more items if there is not enough room.

Actual behavior

The component doesn't collapse the actions until the browser window is resized or a state-change triggers a re-render.

Steps to reproduce the problem

1. Visit app-details for an App (the page has many app actions)
2. resize the browser to trigger a "reflow"

Reduced test case

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

TODO: I tihnk the app details example in web is pretty straight-forward, but I can put this together later when I have more time if helpful 👌

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 12.9.0
• Browser: Chrome 120.0.6099.216 (Official Build) (arm64)
• Device: Macbook
• Operating System: MacOS

Related issues

• https://github.com/Shopify/polaris/issues/11085
• https://github.com/Shopify/polaris/issues/8532

[perrupa]

We tried to force this pre-render collapse by putting our secondary actions in a "more actions" actionGroup which worked!

However opening the actionGroup triggers another collapse 🤣

[perrupa]

Another example of inconsistent collapsing

https://github.com/Shopify/polaris/assets/1577452/714d4b20-70fa-4403-b697-12944fcebf91

[github-actions[bot]]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.