I am having a quite strange issue with some Canvas Components and I'm hoping to find out if it's some sort of weird issue on my end (although I'm not certain how it would be) or if anyone else is experiencing the same.
I'll explain in detail later on, but for now I will just let some screenshots do the talking.
1. This is a simple canvas component I built. It's your garden-variety app header, that can show some basic information like the name of the screen, a back button, etc. All of the elements are inside of a main horizontal container. The red and green containers are not really meant to be that color in prod, but I set them with some distinctive colors for testing.
2. This is what the component should look like when imported from the library and added to an app. Note the component has expanded and the containers along with it. This is as expected. The table in the image is showing the X/Y values for each of the elements within the horizontal container.
3. This is what the component ends up looking like after saving, closing, and reopening the app. Somehow the items inside that parent container have gotten out of order.
To say this is annoying would be a massive understatement. Up until now my experience with the horizontal and vertical containers has been great, and I'm struggling to wrap my head around what could be happening here. To reiterate how this issue happens:
- I made the component within a component library and published it.
- I imported the component into a Canvas App.
- The following happens:
- When I first import the component from the library, it displays as expected in the app.
- After leaving and returning to the app, elements within a horizontal container in the component appear out of order.
To answer some common upfront questions:
- There is nothing silly going on with any of the containers. They are simply flexible width to accommodate various screen sizes. The red/green coloring was something I added for debugging purposes.
- I have tried placing the component in multiple Canvas Apps. All exhibit the same behavior.
- I have tried replicating the component from scratch (actually made a slightly simpler version). It exhibited the same behavior.
- All instances of the component show incorrectly in a given app, including if a new one is added on the same or a different screen.
- The only way I can get the component to show correctly again is by triggering a 'new' load of the component - either by updating the component in the library, or removing it from the app and re-importing.
Given a few other issues I've had recently with colors not rendering as expected when read from an external theme object, I am mildly suspicious that some recent changes to the Canvas App rendering engine have moved a little too far toward eager loading and it's breaking things that are supposed to be dynamic at render time. I am really at a loss as to what might be happening here and would welcome any insight as to whether this is a 'me' issue or something else.
