After reloading form page, components are outside of their wrappers

[jlev]

Renders correctly when going through the flow as intended, but appears broken on refresh.

[jlev]

Same problem when users land on a link from the email, the Plan component is in the wrong wrapper. Doesn't happen this way when getting the state directly through the form.

[camdenlee]

I'm not quite sure how to get to the plan page you referenced in the second comment, but I did investigate the form issue.

Interestingly enough, I can't replicate this issue on my local version, but I can replicate it on the live site. Can you check this as well?

I ran a diff of the rendered code on the live site and this is the difference. It looks like the issue is with this line of code:

<GridContainer className="form-container">

Correct layout if you navigate to the page using the button:

<div class="grid-container form-container" data-testid="gridContainer">	

On refresh, the class of form-container is missing:

<div class="grid-container" data-testid="gridContainer">

After further investigation, it looked to potentially be an issue with @trussworks/react-uswds inside this component, but upon further look, there's nothing there that necessarily looks bad either.

A simple fix might be to put <div className="form-container"> inside the <GridContainer> component. Although not sure if that would have negative side effects (either on the app or on the design system).

Let me know what you think

[jlev]

very weird, thanks for looking. maybe something with the gatsby SSR and @trussworks/react-uswds