diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 83171ae50b8244153bf679347ce23d7eda61560d..8c22f3f6536e51d3402695f46e83c7a96ef2837e 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -29,8 +29,8 @@
     methods: {
       isValid(form) {
         return !form ||
-          form.find('.js-vue-markdown-field').length ||
-          $(this.$el).closest('form') === form[0];
+          form.find('.js-vue-markdown-field').length &&
+          $(this.$el).closest('form')[0] === form[0];
       },
 
       previewMarkdownTab(event, form) {
diff --git a/changelogs/unreleased/44697-when-editing-a-comment-in-an-issue-the-preview-mode-is-toggled-in-the-main-textarea.yml b/changelogs/unreleased/44697-when-editing-a-comment-in-an-issue-the-preview-mode-is-toggled-in-the-main-textarea.yml
new file mode 100644
index 0000000000000000000000000000000000000000..750e28f1a8d94407a394a5cf5809f6722f991e70
--- /dev/null
+++ b/changelogs/unreleased/44697-when-editing-a-comment-in-an-issue-the-preview-mode-is-toggled-in-the-main-textarea.yml
@@ -0,0 +1,6 @@
+---
+title: Fixed bug when editing a comment in an issue,the preview mode is toggled in
+  the main textarea
+merge_request: 20112
+author: Constance Okoghenun
+type: fixed
diff --git a/spec/features/projects/issues/user_comments_on_issue_spec.rb b/spec/features/projects/issues/user_comments_on_issue_spec.rb
index 353f487485dacd7154859c821faa6359ee32b005..ba5b80ed04b2bea90cdbd4a4f31bc08f2f155314 100644
--- a/spec/features/projects/issues/user_comments_on_issue_spec.rb
+++ b/spec/features/projects/issues/user_comments_on_issue_spec.rb
@@ -63,6 +63,14 @@
 
       page.within(".current-note-edit-form") do
         fill_in("note[note]", with: comment)
+        find('textarea').send_keys [:control, :shift, 'p']
+        expect(page).to have_selector('.current-note-edit-form .md-preview-holder')
+        expect(page.find('.current-note-edit-form .md-preview-holder p')).to have_content(comment)
+      end
+
+      expect(page).to have_selector('.new-note .note-textarea')
+
+      page.within(".current-note-edit-form") do
         click_button("Save comment")
       end
 
diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js
index 02117638b63d5b9bf75e7fee9dfa646b7e70b609..488575df4019aa59dee54a8c557df700cc66ee2c 100644
--- a/spec/javascripts/vue_shared/components/markdown/header_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/header_spec.js
@@ -51,7 +51,7 @@ describe('Markdown field header component', () => {
     spyOn(vm, '$emit');
 
     $(document).triggerHandler('markdown-preview:show', [
-      $('<form><textarea class="markdown-area"></textarea></textarea></form>'),
+      $('<form><div class="js-vue-markdown-field"><textarea class="markdown-area"></textarea></div></form>'),
     ]);
 
     expect(vm.$emit).not.toHaveBeenCalled();