With sweetalert2 we move form a popup to other popup... without closing with any standard method before switching... just fire a new one that we need.
now I test script and see when call fire for new popup, code lines after await Swal.fire();... first function not run!
In this case we need run some code when a Swal popup is dismissed with firing new one...(dismiss without reason based on documentation)
If a popup is dismissed by Swal.close() or another popup, the Promise will be resolved with an object { isDismissed: true } (dismiss will be undefined).
if rejected and not resolved should be throw exception.isn't it? I test this function for example, call two time(with waiting):
> async function openNewPopup() {
console.log(1111);
await Swal.fire();
console.log(2222);
}
openNewPopup()
< 1111
< Promise {<pending>}
> // without act on current popup call another popup // I write this now manually
< undefined
> openNewPopup()
< 1111
< Promise {<pending>}
< 2222
(EDIT: I replace function name from x to openNewPopup, and environment testing is chrome developer tools console...)
I think should write log 2222 after second call but just log 1111 for second call, after acting to confirm second popup write log 2222! without error! await Swal test result
+note: I test a promise instead of Swal. with promise correctly worked, but Swal has problem! await Promise test result
Why did something happen? Regardless of the version we are using(version 10), can anyone tell why this is happening?
EDIT: I test this. in version 10 has problem, in version 11 is work correctly
I add snippet for test, you will see codes of chooseSubjectPopup after my comment not execute. I want somebody explain to me why this happen?
async function chooseSubjectPopup() {
const content = `<div>
<button type="button" onclick="chooseItemPopup('home')">Home</button>
<button type="button" onclick="chooseItemPopup('car')">Car</button>
<button type="button" onclick="chooseItemPopup('phone')">Phone</button>
</div>`;
const result = await Swal.fire({
html: content,
showCancelButton: true,
showConfirmButton: false,
cancelButtonText: 'cancel',
});
// bellow codes never run!!!
if (result.isDismissed) {
console.log(result)
if (result.dismiss === Swal.DismissReason.cancel) {
console.log('SubjectPopup: not need any action');
} else {
console.log('SubjectPopup: do something else');
}
}
console.log('SubjectPopup: this log always should be write in console...');
}
async function chooseItemPopup(subject) {
const content = `<div>
Your selected subject is ${subject}
related content is here...
exp exp exp exp
</div>`;
const result = await Swal.fire({
html: content,
showCancelButton: true,
showConfirmButton: false,
cancelButtonText: 'cancel',
});
if (result.isDismissed) {
if (result.dismiss === Swal.DismissReason.cancel) {
console.log('Item: not need any action');
} else {
console.log('Item: do something else');
}
}
console.log('Item: this log always should be write in console...');
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<button type="button" onclick="chooseSubjectPopup()">Start</button>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</body>
</html>I found the problem, a Promise have 3 state.
pending - The initial state of a promise.
fulfilled - The state of a promise representing a successful operation.
rejected - The state of a promise representing a failed operation.
and a promise can hold state of pending forever(until page exist and not closed)
therefore codes after await Swal.fire... in above example, never run because that is always in pending state. (a bug that resolved in sweetalert version 11)