Flexbox UI shrinks until first update?

Photoshop UXP Plugin API
1

I am using flexboxgrid, particularly GitHub - LoicMahieu/react-styled-flexboxgrid: Grid system based on styled-components and flexbox for React.
So it’s flexbox, with grids + styled components everywhere.

I get this weird issue, almost every time on first load my panel does this after any button click:

image
image630×696 43.5 KB

No errors in logs.

This was not happening a year ago on older versions of Photoshop. I am not sure which exact update broke it.

Dragging the window or updating window in any other way restores correct state:
image

Will be greatful for any hints on what could be causing it.

2

Just to elaborate a bit, when any button is clicked there will be a state change. State is modeled with Provider pattern, so effectively a render will be called on all components that are dependent on state.

As initially panel renders correctly, the issue seems to be related to UI re-builds, specifically first rebuild after load.
When re-render works correctly, I can also notice that panel for a brief second is in that broken state, but restores to the right sizes after the blink.

3

Debugging this further, it feels as if display: flex simply stops working and everything breaks

4

So far we’re not able to reproduce this :thinking:.

Just letting you know that behind the scenes some people on the team did try this…

1 Like
5

I will try to come up with a more isolated example as it seems to happen also on a very simple panel

6

@Erin_Finnegan You can find a very simple reproduction repo here: GitHub - AAverin/adobe-uxp-react-playground
It is based on react starter, with the addition of very simple reducer and state, changing UI based on what is inside. Clicking on any button after first load blinks with a broken state where flex stops working.

7

Removing react-styled-flexboxgrid from the dependencies seems to resolve the issue. Even though it is a quite basic styled wrapper for css to support grids

8

Here are some of the css properties that flexboxgrid is using: react-styled-flexboxgrid/Col.js at master · LoicMahieu/react-styled-flexboxgrid · GitHub

Maybe something is not properly supported by UXP?

10

I have resolved the issue by removing flexboxgrid and using custom styles of

export const Row = styled.div`
  display: flex;
  flex-direction: row;
`

export const Col = styled.div`
  display: flex;
  flex-direction: column;
  max-width: 100%;
  ${p => {
    const size = p.theme['grid'].size
    if (_.isUndefined(p.b)) {
      return css`
        flex-grow: 1;
        flex-basis: 0;
      `
    }
    return css`
      width: ${(100 / size) * p.b}%;
    `
  }}
`
1 Like
11

The engineering team still requested we test this and open a JIRA bug, because in your previous sample they “couldn’t see any unsupported CSS properties…”

12

@Erin_Finnegan This could be some localized issue of flexboxgrid package as it’s not really supported for the past 3 years. On the other hand, there isn’t much to support there, it is a pretty basic wrapper using styled-components.

Anything I can do to help besides providing the sample? I couldn’t reproduce a completely broken state in the sample, but at very least it blinks with flex not working or styles not working correctly. Hope that is enough.

13

Engineering was able to reproduce and logged it as UXP-20427

2 Likes