ComboBox Popover Unresponsive in Sheet Without Specific Style

[codewithbugs01]

Description: I've encountered an issue where the popover of a ComboBox becomes unresponsive to mouse events when it's placed within a Sheet component. This lack of responsiveness seems to be tied to the absence of a specific styling property.

Steps to Reproduce:

1. Place a ComboBox inside a Sheet component.
2. Try interacting with the ComboBox popover using mouse events.

Expected Behavior: The popover should normally respond to mouse events, allowing for selection and interaction.

Current Behavior: The popover is currently unresponsive to any mouse events when the ComboBox is placed inside a Sheet.

Possible Solution: I found that adding the following style property to PopoverPrimitive.Content resolves the issue:

style={{ pointerEvents: "auto" }}

With this property, the popover responds correctly to mouse events.

Additional Context:

• This issue has been consistent across multiple browsers and environments.
• No relevant console errors were observed.

[McKayMower]

I have the same issue. I have a sheet. Inside the sheet I have a popover, and the popover content is a react day picker (shadcn calendar essentially). When trying to select a day, the popover just closes and I cannot select a day.

I am using tailwind, and adding className="pointer-event-auto" to PopoverContent does solve the problem!

edit - on mobile, it is still very buggy. the popover will flicker open, and i have to double tap to get the popover to stay open. however, when trying to select a date, it selects the date but immediately closes as if I am touching outside of the popover. Very frustrating!

[mweel1]

@McKayMower seeing the same issue.

Was not able to resolve however with the suggestions above.

[kitsunekyo]

i have a Form inside a Dialog, and the form contains a Calendar. the suggested styling change fixed the issue for me. thanks

[nicoculotta]

I have the same issue. I have a sheet. Inside the sheet I have a popover, and the popover content is a react day picker (shadcn calendar essentially). When trying to select a day, the popover just closes and I cannot select a day.

I am using tailwind, and adding className="pointer-event-auto" to PopoverContent does solve the problem!

edit - on mobile, it is still very buggy. the popover will flicker open, and i have to double tap to get the popover to stay open. however, when trying to select a date, it selects the date but immediately closes as if I am touching outside of the popover. Very frustrating!

I have the same issue, on mobile in iphone I'm not able to open the Calendar component. I guess maybe is a z-index problem or some events are triggered at the same time. Please Let me know If you have an answer. Thanks.

[HMoen]

@nicoculotta , this fix https://github.com/shadcn-ui/ui/issues/910#issuecomment-1770255810 remedies the mobile phone issue.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[fahdharmony]

pointer-event-auto

its pointer-events-auto