segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.36k stars 833 forks source link

Ability to handle overlay/close clicks in Dialog component, onBeforeClose #1649

Open malimccalla opened 1 year ago

malimccalla commented 1 year ago

I am implementing the Dialog component and need to show a "are you sure you want to discard" confirmation message when the user attempts to close the dialog.

Is it possible to run logic before closing the Dialog?

I am able to do this with the onCancel property but it appears it only triggers when the cancel button is clicked not when the modal is closed by clicking the overlay when shouldCloseOnOverlayClick is set to true.

brandongregoryscott commented 1 year ago

I don't think this is currently possible without hacking around the props exposed by the Dialog component. Our SideSheet component has this functionality (exposed through an onBeforeClose prop which you can return false from to prevent closing), so it wouldn't be hard to add.

In the meantime, you might want to set shouldCloseOnOverlayClick to false if you're worried about users closing your dialog without saving first.

malimccalla commented 1 year ago

Thank @brandongregoryscott. I have indeed set shouldCloseOnOverlayClick to prevent this. Will leave the issue open as it's not ideal for our case, but feel free to close it if you want to reduce noise