Skip to content

[S2] <RadioGroup/> <Form/> within component that is overflowing-Y will cause layout jump #8081

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
laurentlahmy opened this issue Apr 11, 2025 · 2 comments · Fixed by #8091
Closed

[S2] <RadioGroup/> <Form/> within component that is overflowing-Y will cause layout jump #8081

laurentlahmy opened this issue Apr 11, 2025 · 2 comments · Fixed by #8091

Comments

@laurentlahmy
Copy link

laurentlahmy commented Apr 11, 2025 •
edited
Loading

Provide a general summary of the issue here

In Spectrum S2, if a <RadioGroup/> is at the end of a <Form/>, within a long component that is overflowing-Y, picking a Radio value at the bottom of the <Form/> will cause a layout jump (equal to the size of the overflow).

🤔 Expected Behavior?

The layout jump should not happen.

😯 Current Behavior

Layout jumps.

💁 Possible Solution

<Form UNSAFE_style={{ overflow: "scroll" }}>
...
</Form>

seems to help but the jump still happens.

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/github/laurentlahmy/s2-vite-project/main

  • scroll to the bottom of page
  • click any radio button
    -> layout jump
    <main className={style({
      height: "screen",
      overflow: "scroll"
    })}>
      <Form>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
        <RadioGroup>
          <Radio value="soccer">Soccer</Radio>
          <Radio value="baseball">Baseball</Radio>
          <Radio value="football" isDisabled>Football</Radio>
          <Radio value="basketball">Basketball</Radio>
        </RadioGroup>
      </Form>
    </main>

Version

0.7.1

What browsers are you seeing the problem on?

Chrome, Firefox

If other, please specify.

No response

What operating system are you using?

macos

🧢 Your Company/Team

External

🕷 Tracking Issue

No response
@snowystinger snowystinger mentioned this issue Apr 14, 2025
Merged
5 tasks
@snowystinger
Copy link
Member

snowystinger commented Apr 14, 2025 •
edited
Loading

Heh, I think this is the same as #7728
We should be able to add position relative
#8091

Note: height screen does not work well if you have scrollbars turned on, better to use height 100% and set the height on all the required parents.

@laurentlahmy
Copy link
Author

Thank you,

<RadioGroup
    label="Layout"
    styles={style({ position: "relative" })}
>
    <Radio value="inline">Inline</Radio>
    <Radio value="circle">Circle</Radio>
</RadioGroup>

Fixes it.

This "bug" was a very one painful for me, because of how hard to debug it is.
Hope you can fix for others.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: give radio/checkbox position relative so the hidden input is contained adobe/react-spectrum
2 participants
@snowystinger @laurentlahmy