diff --git a/resources/assets/src/components/Modal.vue b/resources/assets/src/components/Modal.vue index 0fae01dc..7a339ddd 100644 --- a/resources/assets/src/components/Modal.vue +++ b/resources/assets/src/components/Modal.vue @@ -126,6 +126,7 @@ export default { }, data() { return { + hidden: false, value: this.input, } }, @@ -141,19 +142,25 @@ export default { }, }, mounted() { - $(this.$el).on('hide.bs.modal', /* istanbul ignore next */ () => { - this.dismiss() - }) + $(this.$el) + .on('hide.bs.modal', () => { + if (!this.hidden) { + this.dismiss() + } + }) + .on('hidden.bs.modal', () => { + this.hidden = false + }) }, methods: { confirm() { + this.hidden = true this.$emit('confirm', { value: this.value }) $(this.$el).modal('hide') - this.$destroy() }, dismiss() { + this.hidden = true this.$emit('dismiss') - this.$destroy() }, }, } diff --git a/resources/assets/tests/components/Modal.test.ts b/resources/assets/tests/components/Modal.test.ts index 7989d3f2..51165bf4 100644 --- a/resources/assets/tests/components/Modal.test.ts +++ b/resources/assets/tests/components/Modal.test.ts @@ -1,3 +1,4 @@ +import $ from 'jquery' import 'bootstrap' import { mount } from '@vue/test-utils' import Modal from '@/components/Modal.vue' @@ -156,3 +157,20 @@ test('footer slot', () => { }) expect(wrapper.find('.modal-footer > .contrabass').text()).toBe('sapphire') }) + +test('prevent duplicated dismission', () => { + const wrapper = mount(Modal) + wrapper.find('.btn-secondary').trigger('click') + $(wrapper.element).trigger('hide.bs.modal') + $(wrapper.element).trigger('hidden.bs.modal') + expect(wrapper.emitted().dismiss).toHaveLength(1) + + wrapper.find('.btn-primary').trigger('click') + $(wrapper.element).trigger('hide.bs.modal') + $(wrapper.element).trigger('hidden.bs.modal') + expect(wrapper.emitted().dismiss).toHaveLength(1) + + $(wrapper.element).trigger('hide.bs.modal') + $(wrapper.element).trigger('hidden.bs.modal') + expect(wrapper.emitted().dismiss).toHaveLength(2) +})