Checkbox on Focus take half the high of input modal.

Provide a general summary of the issue here

When I click, it works fine. but I go to focus on the check box; it takes half of the height of the modal. (Not i replace the checkbox input with html input and its works fine) and also other element is working fine

https://github.com/user-attachments/assets/023299cf-d1bb-4652-830f-87c775b487d4

🤔 Expected Behavior?

It should just focus the input with out changing the scroll position

😯 Current Behavior

Focusing the input modal takes unusual hight

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Checkbox component Code

"use client";

import { CheckBoxIcon, BoxIcon } from "icons"; import type { CheckboxProps } from "react-aria-components"; import { Checkbox as AriaCheckbox } from "react-aria-components";

import { Text } from "../Text/Text";

export interface ICheckboxProps extends CheckboxProps { label?: string | JSX.Element; description?: string; isBoldLabel?: boolean; isRequired?: boolean; errorMessage?: string; }

export function Checkbox({ label, description, isBoldLabel, isRequired, errorMessage, ...props }: ICheckboxProps): JSX.Element { return (

{({ isSelected }) => ( <>

{isSelected ? : }

{isBoldLabel ? {label} : label} {description && ( <>
{description} )} {isRequired && ( (required) )} )} {errorMessage}

); }

Modal Component Code

"use client";

/ eslint-disable react/prop-types / import { cva, VariantProps } from "class-variance-authority"; import { CloseIcon } from "icons"; import { ReactNode } from "react"; import { Dialog, Modal as AriaModal, ModalOverlay, ModalOverlayProps, DialogTrigger, Button, } from "react-aria-components";

import { Text } from "../Text/Text";

export interface IModalProps extends ModalOverlayProps, VariantProps { title?: string; triggerNode?: ReactNode; isBackgroundBlur?: boolean; children: ReactNode; closeIcons?: boolean; onOpenRequest?: () => void; animatedModalClassName?: string; }

export function Modal({ title = "", triggerNode, closeIcons = true, isBackgroundBlur = false, children, background, onOpenRequest, animatedModalClassName = "md:min-w-[760px] h-[540px] flex flex-1 items-center justify-center", ...props }: Readonly): JSX.Element { return (

{triggerNode ? ( ) : null} ` fixed inset-0 z-50 overflow-y-auto bg-black/10 flex min-h-full items-center justify-center p-4 text-center ${isEntering ? "animate-in fade-in duration-300 ease-out" : ""} ${isExiting ? "animate-out fade-out duration-200 ease-in" : ""} ${isBackgroundBlur ? "backdrop-blur" : ""} `} {...props} > ` // w-full relative max-w-md overflow-hidden rounded-2xl bg-white text-left align-middle shadow-xl ${animatedModalClassName} // ${isEntering ? "animate-in zoom-in-95 ease-out duration-300" : ""} // ${isExiting ? "animate-out zoom-out-95 ease-in duration-200" : ""} // `} className={({ isEntering, isExiting }) => ariaModalClass({ isEnteringClass: isEntering, isExitingClass: isExiting, className: animatedModalClassName, background, }) } >

); }

const ariaModalClass = cva( " w-full relative max-w-md overflow-hidden rounded-2xl text-left align-middle ", { variants: { background: { white: "bg-white shadow-xl", transparent: "bg-transparent", black: "bg-black", }, isEnteringClass: { true: "animate-in zoom-in-95 ease-out duration-900", false: "", }, isExitingClass: { true: "animate-out zoom-out-95 ease-in duration-200", false: "", }, }, defaultVariants: { background: "white", }, } );

Version

"react-aria": "^3.30.0",     "react-aria-components": "^1.0.0",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

adobe / react-spectrum