Closed
Description
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
Metadata
Metadata
Assignees
Labels
No labels