Is there a way to tell how a modal was closed?

When the onClose event is called I need to tell if it happened as a result of a user clicking the X or outside and a close() method.

If a close() method was used I know it was a controlled close and I know verified that the data was saved first. If it was an uncontrolled close, I need to ask the user if they want the data saved.

I know I can do this with a somewhat convoluted process of setting and unsetting a temp state flag, but I am looking for something a bit more elegant or simple.

Hey Brad! Filed :white_check_mark:

Can also only think of clunky temp state workarounds at the moment (e.g. running an event handler to ask if saved and only letting that event handler run if the state has a certain value that can be set by a controlled close).

I don't know if this helps, but you can disable the "close when clicking outside" option, that way, you know that most likely they clicked the x mark.
additionally, you can remove the X mark via CSS and add a button or image that closes the modal only when clicked. that will give you more control.
FYI - even if you disable both of those options, the user can still exit a modal by pressing the ESC button on the keyboard.

2 Likes