Skip to content

Conversation

@AdeilsonESilva
Copy link

Fixes unwanted vertical scroll caused by CheckboxBubbleInput positioning in @radix-ui/react-checkbox.

The absolutely positioned bubble input was missing explicit top: 0 and left: 0 CSS properties, causing it to extend beyond the trigger button boundaries in certain layouts and trigger unwanted page scroll.

Problem

Without top: 0, left: 0, the input's default positioning + transform: translateX(-100%) could push it outside the button container vertically, creating vertical overflow and scrollbars.

Solution

Added explicit positioning to ensure the input stays perfectly aligned within the trigger button bounds:

style={{
    ...props.style,
    ...controlSize,
    position: 'absolute',
    top: 0,
    left: 0,
    pointerEvents: 'none',
    opacity: 0,
    margin: 0,
    transform: 'translateX(-100%)',
}}

Changes

  • Added top: 0, left: 0 to CheckboxBubbleInput inline styles
  • No API changes, no breaking changes
  • Maintains existing transform behavior for form event bubbling

Testing

  • Verified checkbox behavior in Storybook (pnpm dev)

  • Ran package tests (pnpm test)

  • Confirmed accessibility (keyboard navigation, screen reader states) unchanged

  • 📝 Use a meaningful title for the pull request and include the name of the package modified.

  • ✅ Add or edit tests to reflect the change (run pnpm test).

  • 🔍 Add or edit Storybook examples to reflect the change (run pnpm dev).

  • 🙏 Please review your own PR to check for anything you may have missed.

Demo

Before (vertical scroll on narrow/tall containers):
before

After (no scroll, perfect alignment):
after

@changeset-bot
Copy link

changeset-bot bot commented Dec 2, 2025

⚠️ No Changeset found

Latest commit: a5c6aa1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants