adobe
Unexpected CSS behavior when using React Aria Checkbox inside a container with combination of max width, auto margin and overflow hidden
Provide a general summary of the issue here
An unexpected behavior on the rendered document where the React Aria Checkbox contained in a container that resides outside the container max height bound still take space in the page that cause additional blank space after the container rendered. Such issue occurred when the container have CSS properties of max-width, margin-left: auto, margin-right: auto and overflow: hidden, and containing overflowing React Aria Checkbox, but not with other component such React Aria TextField.
🤔 Expected Behavior?
The contained component outside the container is hidden from the page rendered as illustrated by the following image,
😯 Current Behavior
Additional blank space after the container rendered as illustrated by the following image,
💁 Possible Solution
The root cause most probably is the usage of the VisuallyHidden wrapper component in the following code. I managed to replicate the behavior by adding the VisuallyHidden wrapper into my custom checkbox component included in the issue replication repo. I don't have the solution for this issue, but I may suggest a workaround to this issue by building the Checkbox component using the React Aria Hook instead of using the out-of-the-box Checkbox from React Aria Component
🔦 Context
This issue make the Checkbox impractical for my project because it's breaking the layouting of the web app
🖥️ Steps to Reproduce
Reproducible repo is provided in Issue Replication React Aria Checkbox with the setup instruction included in the README
Version
3.34.3
What browsers are you seeing the problem on?
Firefox, Chrome, Safari
If other, please specify.
No response
What operating system are you using?
MacOS Sonoma 14.6.1
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
I have the same problem. Workaround isn`t a solution for our project. :(
So in the end i used normal
Verified the issue via your reproduction repo, this issue seems to be in the same vein as https://github.com/adobe/react-spectrum/issues/5094. Adding position: relative to the checkbox labels resolved the issue for me locally as suggested in @snowystinger original comment, maybe we could do something similar for RAC Checkbox. However, we'll still need to figure out how to solve this for a general case with VisuallyHidden
closing as duplicate of https://github.com/adobe/react-spectrum/issues/5094, further discussion can happen over there
