search

spacedogXYZ / crush2020

https://crush2020.org
Other
0 stars 2 forks source link

After reloading form page, components are outside of their wrappers #20

Open jlev opened 4 years ago

jlev commented 4 years ago

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

Screen Shot 2020-09-17 at 11 06 23 AM
jlev commented 4 years ago

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.

Screen Shot 2020-09-17 at 11 14 50 AM
camdenlee commented 4 years ago

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 commented 4 years ago

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