Dialog should not close when we click somewhere outside the dialog about baklava HOT 7 CLOSED

I think there can be several considerations on how to handle forms inside dialog. Currently user can close dialog by clicking dialog’s close button, to backdrop or to the close action button defined by the developer. Plus, dialogs can be dismissed by pressing Esc key. All of those can be done “accidentally”. To avoid this:

• We may consider a tight integration about using form inside dialog, and then dialog can check if the form inside is edited before closing itself, and show a confirmation message.
• We may consider giving option to create “non-dismissable” dialogs that will not show close button, will not be close by clicking backdrop or Esc key. In this case this dialog can only be closed via dialog actions that defined (and handled) by the developer. Showing a confirmation message before closing the form when form is not saved yet, should be also done by the developer. For the best user experience, we should encourage developers to not miss showing confirmation message to the user, I believe.

Another consideration would be the other use cases of having “non-dismissable” dialogs other than just form content. Maybe confirmation dialogs that we really want user to pick one of the actions, could be another reason to have this option.

So both features, handling form inside dialog automatically and having “non-dimissible” dialog option can be considered together.

I would like to hear opinions about this.

from baklava.

I think closing on esc key and backdrop click can be optional. We can show confirmation when close buttons are clicked.

from baklava.

Another option would be to have a new event that can be defaultPrevented to block closing dialog in specific flows defined by developer. Like this: https://shoelace.style/components/dialog?id=preventing-the-dialog-from-closing

from baklava.

Yes, this option could work.

from baklava.

🎉 This issue has been resolved in version 2.2.0-beta.2 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from baklava.

@serkancetintas with version 2.2.0-beta.2, now you can track if your form has some changes and block closing dialog if it's not saved yet. Like:

document.querySelector('bl-dialog').addEventListener('bl-dialog-request-close', (event) => {
  if (formIsDirty) {
    event.preventDefault();
    showWarningMessage();
  }
});

from baklava.

🎉 This issue has been resolved in version 2.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from baklava.