Resolve "When editing a comment in an issue, the preview mode is toggled in the main textarea"

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) {

changelogs/unreleased/44697-when-editing-a-comment-in-an-issue-the-preview-mode-is-toggled-in-the-main-textarea.yml

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

spec/features/projects/issues/user_comments_on_issue_spec.rb

@@ -63,6 +63,14 @@ describe "User comments on issue", :js do
 
       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
 

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();