[Bug] Backdrop not removed when 2 notifications with same timeout

[Meshz]

Hello,

First of all, thank you for this package. I noticed that when you programatically call 2 notifications with the same timeout, the backdrop is not removed. Do you have any solution for this problem?

Thank you!

[alekstar79]

I have the same problem when I call a notification with the backdrop enabled, the following notification calls also work with the backdrop enabled, ignoring the configuration settings. Does not help even a forced call to vm.$snotify.setDefaults(config: SnotifyDefaults)

[Meshz]

Hello,

As I had many problems with this bug, I tweaked your package by adding an initTime to each toast (timestamp divided by 100 and rounded for precision purposes): this.toast.initTime = Math.round(+new Date()/100) in initToast method. Then in stateChanged method, I loop through each toast and group them by initTime. So when 2 toasts are launched at the same time, they are seen as one.

For some reason I had to change the template to (_vm.backdrop > 0) instead of (_vm.backdrop >= 0) because the line setTimeout(function () { return _this.$snotify.remove(_this.toast.id, true); }, _this.toast.config.animation.time / 2) in onRemove method seems to recreate a backdrop with 0 opacity.

HTH you finding a way to fix this. Thank you again!

[Mornney]

I am having a similar issue with the backdrop not being removed.

I found this in the JS file:
// TODO: fix backdrop if more than one toast called in a row

Any news on when this will be fixed? Does anyone know a work around, at the moment the backdrop dosesnt get removed which then prevents users being able to access the form behind the backdrop

[Meshz]

Basically, my fix is explained in my previous post. But here is what I did for now in vue-snotify.esm.js (kinda ugly but it works). HTH!

// --- Line 323
initToast: function () {
	this.toast.initTime = Math.round(+new Date()/100); // Added initTime
	if (this.toast.config.timeout > 0) {
		this.startTimeout(0);
	}
}

// --- Line 634
stateChanged: function (event) {
	let toastShown = []
	if (!this.withBackdrop.length) {
		return;
	} else {
		// --- Group toasts by initTime
		for (let i=0; i<this.withBackdrop.length; i++) {
			if(toastShown.indexOf(this.withBackdrop[i].initTime) == -1){
				toastShown.push(this.withBackdrop[i].initTime);
			}
		}
	}
	switch (event) {
		case 'mounted':
			if (this.backdrop < 0) {
				this.backdrop = 0;
			}
			break;
		case 'beforeShow':
			this.backdrop = this.withBackdrop[this.withBackdrop.length - 1].config.backdrop;
			break;
		case 'beforeHide':
			// --- Use groups to determine if one or more toasts shown
			if (toastShown.length === 1) {
				this.backdrop = 0;
			}
			break;
		case 'hidden':
			// --- Same as beforeHide
			if (toastShown.length === 1) {
				this.backdrop = -1;
			}
			break;
		}
	}
}

// --- Line 695
// --- Changed condition _vm.backdrop >= 0 to _vm.backdrop > 0 because backdrop is recreated with 0 opacity by second timeout in onRemove (line 400)
var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.backdrop > 0)?_c('div',{staticClass:"snotify-backdrop",style:({opacity: _vm.backdrop})}):_vm._e(),_vm._v(" "),_vm._l((_vm.notifications),function(position,index){return _c('div',{staticClass:"snotify",class:'snotify-' + index},_vm._l((_vm.notifications[index].slice(_vm.blockSize_a, _vm.blockSize_b)),function(toast){return _c('toast',{key:toast.id,attrs:{"toastData":toast},on:{"stateChanged":_vm.stateChanged}})}))})],2)};

[Mornney]

Thank you, will have a look at trying this.

Its better than my work around :)

[jeffbarretocopam]

Basically, my fix is explained in my previous post. But here is what I did for now in vue-snotify.esm.js (kinda ugly but it works). HTH!

// --- Line 323
initToast: function () {
	this.toast.initTime = Math.round(+new Date()/100); // Added initTime
	if (this.toast.config.timeout > 0) {
		this.startTimeout(0);
	}
}

// --- Line 634
stateChanged: function (event) {
	let toastShown = []
	if (!this.withBackdrop.length) {
		return;
	} else {
		// --- Group toasts by initTime
		for (let i=0; i<this.withBackdrop.length; i++) {
			if(toastShown.indexOf(this.withBackdrop[i].initTime) == -1){
				toastShown.push(this.withBackdrop[i].initTime);
			}
		}
	}
	switch (event) {
		case 'mounted':
			if (this.backdrop < 0) {
				this.backdrop = 0;
			}
			break;
		case 'beforeShow':
			this.backdrop = this.withBackdrop[this.withBackdrop.length - 1].config.backdrop;
			break;
		case 'beforeHide':
			// --- Use groups to determine if one or more toasts shown
			if (toastShown.length === 1) {
				this.backdrop = 0;
			}
			break;
		case 'hidden':
			// --- Same as beforeHide
			if (toastShown.length === 1) {
				this.backdrop = -1;
			}
			break;
		}
	}
}

// --- Line 695
// --- Changed condition _vm.backdrop >= 0 to _vm.backdrop > 0 because backdrop is recreated with 0 opacity by second timeout in onRemove (line 400)
var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.backdrop > 0)?_c('div',{staticClass:"snotify-backdrop",style:({opacity: _vm.backdrop})}):_vm._e(),_vm._v(" "),_vm._l((_vm.notifications),function(position,index){return _c('div',{staticClass:"snotify",class:'snotify-' + index},_vm._l((_vm.notifications[index].slice(_vm.blockSize_a, _vm.blockSize_b)),function(toast){return _c('toast',{key:toast.id,attrs:{"toastData":toast},on:{"stateChanged":_vm.stateChanged}})}))})],2)};

Why you don't create that PR ? This is one of the solution