Issue with Polaris Filters UI not working properly

Highlighted
New Member
2 0 0

Hi everyone, I seem to be having trouble with the Filters component of Shopify Polaris (https://polaris.shopify.com/components/lists-and-tables/filters). I have raised an issue on their github which you can view in this link: https://github.com/Shopify/polaris-react/issues/3264 but I will also try to explain what's going on here.

I am using the Filters component with 3 filters on my custom Shopify app. The filters themselves don't matter, however I do have all of them set to `shortcut: true`, meaning they should all show up on my screen if it's large enough. Now, whenever I use ngrok to run my app, it does seem to work as intended. The 3 filters show up when the screen is large enough, and it shows the "More filters" button on smaller screens. Even if I refresh or navigate to other pages then back, it works fine.

The issue arises whenever I deploy the project to Google Cloud Platform. It should essentially be the same code, just hosted on a different place (so I don't need to keep ngrok running all the time), but for some reason the Filters UI breaks here. On first load, the Filters look fine. The 3 filters are there, as they should be. But when I refresh the page, or navigate to some other page (like a different app, for example), then back to the app, the 3 filters are now missing, and it shows me the More Filters button as if it was on a small screen. The only way to undo this is to hard refresh.

I've tried various things such as setting custom widths, updating Polaris to the latest version among others, but none of them seems to have worked. Does anybody have any clue as to what might be causing this? Any help is greatly appreciated

 

0 Likes