Let field.vue handle the changing of preview

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -45,8 +45,10 @@
       },
     },
     methods: {
-      toggleMarkdownPreview() {
-        this.previewMarkdown = !this.previewMarkdown;
+      toggleMarkdownPreview(isPreview) {
+        if (isPreview === this.previewMarkdown) return;
+
+        this.previewMarkdown = isPreview;
 
         /*
           Can't use `$refs` as the component is technically in the parent component

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -20,16 +20,12 @@
         return form && !form.find('.js-vue-markdown-field').length;
       },
 
-      isActiveTarget(target) {
-        return target.closest('li').classList.contains('active');
-      },
-
-      toggleMarkdownPreview(e, form) {
+      toggleMarkdownPreview(e, isPreview, form) {
         if (e.target.blur) e.target.blur();
 
-        if (this.isMarkdownForm(form) || this.isActiveTarget(e.target)) return;
+        if (this.isMarkdownForm(form)) return;
 
-        this.$emit('toggle-markdown');
+        this.$emit('toggle-markdown', isPreview);
       },
     },
     mounted() {
@@ -48,17 +44,19 @@
     <ul class="nav-links clearfix">
       <li :class="{ active: !previewMarkdown }">
         <a
+          class="js-write-link"
           href="#md-write-holder"
           tabindex="-1"
-          @click.prevent="toggleMarkdownPreview($event)">
+          @click.prevent="toggleMarkdownPreview($event, false)">
           Write
         </a>
       </li>
       <li :class="{ active: previewMarkdown }">
         <a
+          class="js-preview-link"
           href="#md-preview-holder"
           tabindex="-1"
-          @click.prevent="toggleMarkdownPreview($event)">
+          @click.prevent="toggleMarkdownPreview($event, true)">
           Preview
         </a>
       </li>

spec/javascripts/vue_shared/components/markdown/field_spec.js

@@ -53,8 +53,8 @@ describe('Markdown field component', () => {
           });
         }));
 
-        previewLink = vm.$el.querySelector('.nav-links li:nth-child(2) a');
-        writeLink = vm.$el.querySelector('.nav-links li:nth-child(1) a');
+        previewLink = vm.$el.querySelector('.nav-links .js-preview-link');
+        writeLink = vm.$el.querySelector('.nav-links js-write-link');
       });
 
       it('sets preview link as active', (done) => {