ui
ui copied to clipboard
shadcn-ui
ComboBox Popover Unresponsive in Sheet Without Specific Style
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:
- Place a ComboBox inside a Sheet component.
- 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.
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!
@McKayMower seeing the same issue.
Was not able to resolve however with the suggestions above.
i have a Form inside a Dialog, and the form contains a Calendar. the suggested styling change fixed the issue for me. thanks
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.
@nicoculotta , this fix https://github.com/shadcn-ui/ui/issues/910#issuecomment-1770255810 remedies the mobile phone issue.
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.
