Idea for dialog not to close if changes within not saved?

[trailsnail]

Hi @claviska

since cancelling of sl-show and sl-hide is no longer possible with beta.42 I would to know how I could handle following usecase:

• dialog opens with form containing some editable properties of an entity
• user changes values, forgets to click "save" and wants to close the dialog
• I use the sl-overlay-dismiss event to prevent closing the dialog by a click outside
• I prevent sl-hide by preventing the click on the custom close button in the footer, until user confirms his decission
• but what should I do with the click on the close-button within the dialog header?

Any legit ideas?
Hide close-button with CSS, hide the header?

Thanks and have a nice weekend

[staabm]

Hide close-button with CSS, hide the header?

sounds like a bad idea because they user may not want to save the edits but just close the dialog (after confirming changes will be lost)

[claviska]

While I personally dislike this pattern, I understand that there are use cases where it may be necessary. To facilitate this, I've removed the sl-overlay-click event and added sl-request-close. The new event will be emitted when the user "requests" to close the dialog by clicking the close button, clicking the overlay, or pressing Escape. (If future interactions allow the user to close the dialog, they will also be covered by this event.)

If you cancel the sl-request-close event, the dialog will remain open and a subtle animation will draw attention back to it.

CleanShot.2021-06-21.at.09.42.30.mp4

Note that this will not prevent the dialog from closing when toggling the open prop or calling dialog.hide(). As a developer, you now have complete control over this so you'll need to address potential calls to those in your own code.

You can preview this change in the next branch. The relevant section of the docs can be found here: https://next.shoelace.style/components/dialog?id=preventing-the-dialog-from-closing

The same change was applied to <sl-drawer> as well.

[trailsnail]

Wow. Thank you. Great solution!