How to avoid dialog closes on confirm?
anialamo opened this issue · 2 comments
Hi! I use vuejs-dialog and I use on <button @click=showMyModal.
I add a input type email and I need to validate it before continuing. How to avoid dialog.confirm always closes?
showMyModal has this code:
showMyModal:function() {
let ctx = this;
let message = {
title: "My custom title",
body:
'<div class="modal-body my_modal_content">' +
'<div class="alert" id="alert_panel" role="alert"></div>' +
'<div class="form-group space_form">' +
'<label for="recipient_email" class="col-sm-12 col-md-12 control-label">' +
'Enter email</label>' +
'<div class="col-sm-12 col-md-12">' +
'<input type="email" required class="form-control" id="recipient_email" placeholder="Enter email"/>' +
'</div>' +
'</div>' +
'<div class="clear"></div>' +
'</div>'
};
ctx.$dialog.confirm(message)
.then(function () {
var recipientEmail = document.querySelector('#recipient_email').value;
if (recipientEmail.trim() !== "") {
if (recipientEmail.endsWith("@myDomain.com") == true) {
// Do something & finally close
} else {
document.querySelector(".my_modal_content #alert_panel").innerHTML("Error, enter a valid email");
document.querySelector(".my_modal_content #alert_panel").classList.add("alert-danger");
// NOW: This dialog CLOSES
// FUTURE: I need this dialog stays OPEN
}
} else {
// NOW: This dialog CLOSES
// FUTURE: I need this dialog stays OPEN
}
})
.catch(function () {
// Do nothing, because this dialog CLOSES and this works fine!
});
},
And I defined my vuejs-dialog with this code:
Vue.use(VuejsDialog.main.default, {
html: true,
loader: false,
okText: "Accept",
cancelText: "Cancel",
animation: 'bounce'
});
@anialamo Thanks for trying the plugin... Unfortunately, the feature you're requesting doesn't come out of the box.
Reason is because click on vuejs-dialog default buttons resolves the waiting promise (this process can only be done once for every promise). Currently exploring other options for coming versions of vuejs-dialog. Think of vuejs-dialog (current version 1.X and before) as a single responsibility dialog that asks only one question or shows only one info, and then it is dismissed.
A solution that looks more like a hack will be to:
- Render the dialog
- Take input and process input
- If invalid, dismiss dialog and repeat step 1
This obviously means one dialog per input. I will modify your function to look like thisshowMyModal:function(hasError = false) {
and then continue to
} else {
// NOW: This dialog CLOSES
// FUTURE: I need this dialog stays OPEN
this.showMyModal(true);
}
That said, if you still want to do it in a more elegant way you may want to look at custom dialogs feature.
Please let me know if you're still having trouble getting it to work 😄
A lot of thanks! This works fine for me!!!