react-aria-components `Popover` immediately closes after opening when using the DatePicker code example

[dvasyliev]

🐛 Bug Report

I created DatePicker following the example in the documentation. I created a story for this component using a storybook. When I open DatePicker page in storybook > open dev tools > enable mobile mode > try open date picker - it immediately closes.

🤔 Expected Behavior

The date picker popover should be opened

😯 Current Behavior

The date picker immediately closes
Storybook link: https://dvasyliev.github.io/react-aria-components-popover-issue/?path=/story/datepicker--default

💁 Possible Solution

When I wrapped Button and Popover into DialogTrigger and added console.log for onOpenChange and clicked once on a button, I got first log with value "true" = opened, and second log with value "false" - closed.

🔦 Context

Our tester reported that she sees the same behaviour on Android in the Chrome browser, so it will affect clients of our application if we release it.

💻 Code Sample

Github repo: https://github.com/dvasyliev/react-aria-components-popover-issue

🌍 Your Environment

Software	Version(s)
react-aria-components	1.0.0-alpha.3
@storybook/react	7.0.12
Browser	Chrome version 113.0.5672.92 (Official Build) (arm64)
Operating System	macOS Ventura version 13.3.1

🧢 Your Company/Team

An administrative platform for Belgian users

🕷 Tracking Issue (optional)

Not publicly available

[dvasyliev]

Screen.Recording.2023-05-16.at.14.13.44.mov

[snowystinger]

I'm guessing this is caused by React StrictMode, could you try turning that off? https://github.com/dvasyliev/react-aria-components-popover-issue/blob/main/src/index.tsx#L9

We don't support StrictMode right now, we're tracking it here #779

[dvasyliev]

@snowystinger I removed React StrictMode, and the issue is still present.
I guess the problem is somewhere in sync DialogTrigger and DatePicker or with the touch event (because it happens in the device mode in Chrome)

[LFDanLu]

I believe this is a issue with the iframe, verified in Chrome dev tools and my own Android phone. Still digging to track down what exactly is causing the issue.

[LFDanLu]

Seems like focus makes it to the Popover properly, but then is lost to the body or something, triggering a blur and thus closing the Popover.

[dvasyliev]

The same issue with the Select component