search

chakra-ui / ark

Ark UI is a headless UI library with over 45+ components designed to build scalable Design Systems that works for a wide range of JS frameworks.
https://ark-ui.com
MIT License
3.76k stars 103 forks source link

Dialog closes when clicking on scroll bar #2925

Closed Hagendorn closed 1 month ago

Hagendorn commented 1 month ago

Description

When I click the scrollbar from the document to scroll down the view port, the dialog gets automatically closed. I expect that the dialog stays open and the view port gets scrolled

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/dreamy-joliot-tgsnnc

Steps to Reproduce

  1. Press "Open dialog"
  2. Click into the scroll bar to scroll the view port

Ark UI Version

4.0.0

Framework

Browser

Google Chrome

Additional Information

No response

firhanram commented 1 month ago

I got this issue also. When the modal props set to be false, It will be able to hover the scrollbar. But when scrollbar clicked, It will close the modal.

https://codesandbox.io/p/github/firhanram/try-ark-ui/master?import=true

cschroeter commented 1 month ago

@Hagendorn

Hi Christian – great to see you here! Hope you're doing well :)

Regarding the issue, I see where you're coming from. There are a couple of ways to approach this. The first option that comes to mind is to completely disable this behavior:

<Dialog.Root closeOnInteractOutside={false} />

Another solution could be shifting the scroll behavior into the dialog content itself, so the dialog remains static while you scroll within the dialog.

Let me know if that would work for you.

segunadebayo commented 1 month ago

I just pushed a fix for this in Zag.js. We'll release an update shortly.

If the issue persists after upgrading, I'll re-open it.

Hagendorn commented 1 month ago

Thanks @firhanram and @cschroeter for your support and @segunadebayo for providing a fix so quickly!

@cschroeter thanks I am fine. I hope you are well too! Let me know if I can support