Unexpected CSS behavior when using React Aria Checkbox inside a container with combination of max width, auto margin and overflow hidden

varvay commented 1 month ago

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

IonutDaniel99 commented 1 month ago

I have the same problem. Workaround isn`t a solution for our project. :(

So in the end i used normal

LFDanLu commented 1 month ago

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

adobe / react-spectrum