Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add preventClose argument to onClose callback #350

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

cervantes-x
Copy link
Contributor

This PR enhances the Drawer component by introducing a new feature to the onClose callback. It adds a preventClose argument that, when called, will prevent the drawer from closing and reset its position. This is particularly useful when dealing with forms or interactive content inside the drawer, ensuring that users don't accidentally close it before completing their actions.

Example:

      <Drawer
        onClose={(preventClose) => {
          if (getUnsavedChanges() ) { // custom method to check for unsaved changes
            openUnsavedChangesDialog(); // show a dialog to the user about unsaved changes
            preventClose?.(); // prevent the drawer from closing
          }
        }}
        open={drawerOpen}
        onOpenChange={(open) => {
          setDrawerOpen(open);
        }}
      >
        ...
        <DrawerContent>
          ...
        </DrawerContent>
      </Drawer>
prevent-close-example.mp4

Copy link

vercel bot commented May 11, 2024

@cervantes-x is attempting to deploy a commit to the emil Team on Vercel.

A member of the Team first needs to authorize it.

@artemis-prime
Copy link
Contributor

Why not just have onClose return a boolean? Say, if true, then the drawer doesn't close. Why do it through a called function?

@rortan134
Copy link
Contributor

I believe this is already possible with the dismissible property, just set it to false when the drawer shouldn't close. (Also it looks like it isn't documented but there is an example listed)

@cervantes-x
Copy link
Contributor Author

Why not just have onClose return a boolean? Say, if true, then the drawer doesn't close. Why do it through a called function?

To be honest, I didn't consider it. Since it made more sense to me to explicitly call a function instead of just returning a boolean in onClose. But I guess that approach would be easier. I will see if I can update it this week.

I believe this is already possible with the dismissible property, just set it to false when the drawer shouldn't close. (Also it looks like it isn't documented but there is an example listed)

This is true, however for my app it was necessary to provide our users with an explanation for why the drawer isn't dismissible. Additionally, I wanted to keep the ability to slide the drawer down. This is also the native behavior in IOS drawers.

@joaom00
Copy link
Contributor

joaom00 commented May 13, 2024

actually this API already exists through Radix using onInteractOuside={event => event.preventDefault()} but this may not work very well as there are some state synchronization issues when you control the open state of the vaul. This is something I would like to fix soon

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants