[Popover] Nested popover is not closing by clicking trigger in Safari

[tobiasf]

Bug report

The bug described below only happens in Safari. I have tested it in Chrome, Firefox and Edge on a Mac, and can only reproduce it in Safari on Mac and iPhone.

Current Behavior

I have a Popover component (B) inside another Popover component (A). Closing A after it's opened works by clicking outside or clicking the trigger again. If I open A, then B, closing B does not work by clicking the trigger. B just keeps reopening when I click the trigger. However, it works to close B by clicking outside of the content of B.

Screenshot

Expected behavior

It should also work to close nested popovers by clicking the trigger. See screenshot of how the same implementation works in Chrome

Screenshot

Reproducible example

CodeSandbox Template

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-popover	0.1.6
React	n/a	18.0.0
Browser	Safari	Versjon 15.5 (17613.2.7.1.8) and on iPhone 11
Node	n/a	16.5.0
npm/yarn	npm	8.5.5
Operating System	macOS	12.4
Operating System	iOS	15.5

[benoitgrelard]

Hey @tobiasf,

Thanks for reporting this, would you be able to provide a sandbox reproducing the issue? You can create one easily by cloning the demo from the website by clicking the codesandbox icon in the bottom right corner.

Thanks 🙏

[tobiasf]

Hey @tobiasf,

Thanks for reporting this, would you be able to provide a sandbox reproducing the issue? You can create one easily by cloning the demo from the website by clicking the codesandbox icon in the bottom right corner.

Thanks 🙏

Hey @benoitgrelard!

I already provided a sandbox with a reproduction of the issue:) (https://codesandbox.io/s/wm80q9)

[benoitgrelard]

Ah my bad I missed it cause it was called "CodeSandbox Template" I thought it was an unedited template 🙂

Thanks!

[tobiasf]

Ah my bad I missed it cause it was called "CodeSandbox Template" I thought it was an unedited template 🙂

Thanks!

I realised now that I should have changed that:D Let me know if there is anything else I can do to help debug this issue

[benoitgrelard]

I can reproduce the issue in Safari in our storybook too. We'll take a look 👍

[sookmax]

Hello @benoitgrelard :wave:

I was having the exact same issue stated here, and just wondering if any progress has been made regarding this bug :grin:.

On and thank you and the team for building and maintaining an awesome project by the way :pray:. I really enjoy using radix-ui and have tremendous respect for you guys taking care of all these complexities and nuisances required for high-fidelity UI components!

P.S. I'm currently using 1.0.5 of @radix-ui/react-popover.

[benoitgrelard]

Hi @sookmax, we haven't had a chance to look at it yet unfortunately.

[benoitgrelard]

Duplicate of #2105

[benoitgrelard]

#2105 is a more general representation of the issue which manifested here.

[benoitgrelard]

This has been fixed here now: #2110

[sookmax]

@benoitgrelard Hello there, thanks for a quick fix!

I actually went ahead and tried 1.0.6-rc.5 version as suggested here: #2105 comment.

Unfortunately it didn't seem to fix the issue for my case. I'm attaching a short video, and I hope it helps. Thanks again for your hard work!

https://user-images.githubusercontent.com/71210554/234465870-09ee4242-d0e3-454b-9e17-e05bf604848f.mp4

[sookmax]

@benoitgrelard Hey I actually made a reproduction repo bootstrapped with create next-app here: nested popover issue repro.

And here's a short video I recorded with this repo.

https://user-images.githubusercontent.com/71210554/234471576-84b6e534-5a23-46f0-aea1-62522d54bd64.MP4

[benoitgrelard]

You are right, it looks like some issue is remaining but only on Safari iOS now.