Fix <Modal> component

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()
     },
   },
 }

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)
+})