Dont emit toggle-markdown event if current target is already active and add specs

1 files changed, 11 insertions, 5 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 5bf2a90cc3b..ef1c2dcf638 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -16,12 +16,18 @@
       toolbarButton,
     },
     methods: {
+      isMarkdownForm(form) {
+        return form && !form.find('.js-vue-markdown-field').length;
+      },
+
+      isActiveTarget(target) {
+        return target.closest('li').classList.contains('active');
+      },
+
       toggleMarkdownPreview(e, form) {
-        if (form && !form.find('.js-vue-markdown-field').length) {
-          return;
-        } else if (e.target.blur) {
-          e.target.blur();
-        }
+        if (e.target.blur) e.target.blur();
+
+        if (this.isMarkdownForm(form) || this.isActiveTarget(e.target)) return;
 
         this.$emit('toggle-markdown');
       },