preventing lost work if accidentally clicking outside of the modal

[elainelylee]

Because the modal allows you to close it by clicking outside of it, there's potential for lost work if you accidentally click outside of the modal. What's the recommendation on giving a chance for someone to save their work before closing out or close without saving?

[serifluous]

Hey @elainelylee ! We recommend using a browser dialog (https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm), which you could trigger when someone tries to close the modal (regardless of whether they click outside of it, press the Esc key, etc).

[TheSisb]

Another option rather than displaying a confirm dialog could be to save the current form field values to localstorage or sessionstorage in the onDismiss function. Then you can restore the values when the modal is reopened. How to do that is up to the implementing product team, based on your use-case and needs.

[elainelylee]

Great! Alternatively, I started exploring having certain entries automatically saved and breaking apart the steps in different modal windows. Elaine Lee Principal Product Designer - Twilio AI [image: twilio] <https://www.twilio.com/?utm_source=email_signature> EMAIL ellee@twilio.com

…

On Thu, Sep 24, 2020 at 8:51 AM Sarah ***@***.***> wrote: Hey @elainelylee <https://urldefense.com/v3/__https://github.com/elainelylee__;!!NCc8flgU!NGAZky9twNAJY7mRGIZ1nUNm1Ss66vbIg0dRxncCd-5GEuo8EZdn7gkGlZBu$> ! We recommend using a browser dialog ( https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm <https://urldefense.com/v3/__https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm__;!!NCc8flgU!NGAZky9twNAJY7mRGIZ1nUNm1Ss66vbIg0dRxncCd-5GEuo8EZdn7rBEp1ug$>), which you could trigger when someone tries to close the modal (regardless of whether they click outside of it, press the Esc key, etc). — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/791*discussioncomment-84357__;Iw!!NCc8flgU!NGAZky9twNAJY7mRGIZ1nUNm1Ss66vbIg0dRxncCd-5GEuo8EZdn7hvPVTre$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ABTIKLFRMS2QVZUMU4VH5S3SHNTFBANCNFSM4RXUQN7A__;!!NCc8flgU!NGAZky9twNAJY7mRGIZ1nUNm1Ss66vbIg0dRxncCd-5GEuo8EZdn7jQXHMNv$> .

[serifluous]

Very cool! Not sure if you're planning on doing something like a multi-step modal, but @andipants12 on V&V is prototyping one with the Paste modal component in Discussion #790. If you follow along there, your team may be able to use the same thing.

[pguptaDS]

@serifluous I am curious to understand the reasoning behind the default behavior of closing the modal if the user clicks outside of it.

[serifluous]

Hey @pguptaDS ! From looking at the original design brief (cmd+f for references of "click"), it seems like it may have been because legacy console and SendGrid modals had the same interaction. @kylegilbreath might have more context since he contributed the component design.

[pguptaDS]

Just circling back on this. Would love to understand the reasoning behind this (cc @kylegilbreath) and curious if that reasoning stands true today as well.