ReactAriaDatePicker defaultOpen={true} incorrectly sets isPressed=true on child Button elements

[Raja-Techie-45]

Provide a general summary of the issue here

When using defaultOpen={true} on the ReactAriaDatePicker component, the calendar should open by default, but child Button elements should maintain their normal state unless explicitly pressed. The isPressed state should only apply to the trigger button that opens the calendar, not all Button components within the DatePicker hierarchy.

🤔 Expected Behavior?

When using defaultOpen={true} on the ReactAriaDatePicker component, the calendar should open by default, but child Button elements should maintain their normal state unless explicitly pressed. The isPressed state should only apply to the trigger button that opens the calendar, not all Button components within the DatePicker hierarchy.

😯 Current Behavior

Setting defaultOpen={true} on ReactAriaDatePicker causes all child Button elements within the component hierarchy to receive an isPressed=true state by default, even when they're not directly related to the opening/closing mechanism of the calendar.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

You can check the issue in below code sandbox link
https://codesandbox.io/p/sandbox/qyzpxw

Version

react-aria-components:1.8.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Ubuntu 24.04.2 LTS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[Nagendra7509]

I'm experiencing the same issue in our project, and it would be great to get this fixed!

[rururux]

Hello.

I've been looking into this issue regarding the isPressed state propagation when defaultOpen={true} is used on the DatePicker.
I had an idea for a potential solution/fix. My approach would be to refactor the DatePicker implementation to avoid using the Button Context to propagate the isPressed={state.isOpen} state to all child buttons. Instead, the trigger button component(like DatePickerTrigger) could be updated to directly access the DatePicker's state (e.g., using useDatePickerState or context) and apply the pressed state based on state.isOpen specifically to itself. This would prevent unintended isPressed states on other buttons within the DatePicker.

What do you think of this approach? If this direction seems acceptable, I would be willing to work on a pull request to implement it.

[Raja-Techie-45]

This looks fine to me, but I'm not sure if this is the correct way to fix it. What are your thoughts @snowystinger?

[devongovett]

I think your example is missing the <Dialog> wrapper around the <Calendar>. Dialog already clears the ButtonContext so that the value set by DatePicker does not apply to its children. Is there a reason the Popover and Dialog were commented out in your sandbox?

here's a modified version of your sandbox with the Popover and Dialog showing it works: https://codesandbox.io/p/sandbox/mystifying-glitter-forked-njg9mc

[Raja-Techie-45]

@devongovett that codesandbox is not found. Can you give me the updated one.