diff --git a/packages/toast/Toast.js b/packages/toast/Toast.js index dec203599..9557e3b0c 100644 --- a/packages/toast/Toast.js +++ b/packages/toast/Toast.js @@ -69,6 +69,10 @@ export default sfc({ if (this.onOpened) { this.onOpened(); } + }, + + onAfterLeave() { + this.$emit('closed'); } }, @@ -100,7 +104,11 @@ export default sfc({ } return ( - +
item !== toast); + toast.$on('closed', () => { + clearTimeout(toast.timer); + queue = queue.filter(item => item !== toast); - const parent = toast.$el.parentNode; - if (parent) { - parent.removeChild(toast.$el); - } + const parent = toast.$el.parentNode; + if (parent) { + parent.removeChild(toast.$el); + } - toast.$destroy(); + toast.$destroy(); + }); } } }; diff --git a/packages/toast/test/index.spec.js b/packages/toast/test/index.spec.js index 7e92d8941..ebe98268d 100644 --- a/packages/toast/test/index.spec.js +++ b/packages/toast/test/index.spec.js @@ -75,7 +75,7 @@ test('clear toast', () => { Toast.allowMultiple(false); }); -test('multiple toast', () => { +test('clear multiple toast', () => { Toast.allowMultiple(); Toast.clear(true); const toast1 = Toast.success('1'); @@ -89,6 +89,21 @@ test('multiple toast', () => { Toast.allowMultiple(false); }); +test('remove toast DOM when cleared in multiple mode', async () => { + Toast.allowMultiple(); + Toast.clear(true); + const toast = Toast({ message: '1' }); + await later(); + + // mock onAfterLeave + toast.clear(); + toast.onAfterLeave(); + await later(); + + expect(toast.$el.parentNode).toEqual(null); + Toast.allowMultiple(false); +}); + test('set default options', () => { Toast.setDefaultOptions({ duration: 1000 }); expect(Toast().duration).toEqual(1000);