Merge branch 'issue-inline-edit-quick-submit' into 'master'

Fixes ctrl+enter not submit issue edit form

Closes #33758

See merge request !12422

app/assets/javascripts/issue_show/components/fields/description.vue

@@ -47,7 +47,8 @@
         ref="textarea"
         slot="textarea"
         placeholder="Write a comment or drag your files here..."
-        @keydown.meta.enter="updateIssuable">
+        @keydown.meta.enter="updateIssuable"
+        @keydown.ctrl.enter="updateIssuable">
       </textarea>
     </markdown-field>
   </div>

app/assets/javascripts/issue_show/components/fields/title.vue

@@ -26,6 +26,7 @@
       placeholder="Issue title"
       aria-label="Issue title"
       v-model="formState.title"
-      @keydown.meta.enter="updateIssuable" />
+      @keydown.meta.enter="updateIssuable"
+      @keydown.ctrl.enter="updateIssuable" />
   </fieldset>
 </template>

changelogs/unreleased/issue-inline-edit-quick-submit.yml

+---
+title: Fixed ctrl+enter not submit issue edit form
+merge_request:
+author:

spec/javascripts/issue_show/components/fields/description_spec.js

 import Vue from 'vue';
+import eventHub from '~/issue_show/event_hub';
 import Store from '~/issue_show/stores';
 import descriptionField from '~/issue_show/components/fields/description.vue';
+import { keyboardDownEvent } from '../../helpers';
 
 describe('Description field component', () => {
   let vm;
@@ -18,6 +20,8 @@ describe('Description field component', () => {
 
     document.body.appendChild(el);
 
+    spyOn(eventHub, '$emit');
+
     vm = new Component({
       el,
       propsData: {
@@ -53,4 +57,20 @@ describe('Description field component', () => {
       document.activeElement,
     ).toBe(vm.$refs.textarea);
   });
+
+  it('triggers update with meta+enter', () => {
+    vm.$el.querySelector('.md-area textarea').dispatchEvent(keyboardDownEvent(13, true));
+
+    expect(
+      eventHub.$emit,
+    ).toHaveBeenCalled();
+  });
+
+  it('triggers update with ctrl+enter', () => {
+    vm.$el.querySelector('.md-area textarea').dispatchEvent(keyboardDownEvent(13, false, true));
+
+    expect(
+      eventHub.$emit,
+    ).toHaveBeenCalled();
+  });
 });

spec/javascripts/issue_show/components/fields/title_spec.js

 import Vue from 'vue';
+import eventHub from '~/issue_show/event_hub';
 import Store from '~/issue_show/stores';
 import titleField from '~/issue_show/components/fields/title.vue';
+import { keyboardDownEvent } from '../../helpers';
 
 describe('Title field component', () => {
   let vm;
@@ -15,6 +17,8 @@ describe('Title field component', () => {
     });
     store.formState.title = 'test';
 
+    spyOn(eventHub, '$emit');
+
     vm = new Component({
       propsData: {
         formState: store.formState,
@@ -27,4 +31,20 @@ describe('Title field component', () => {
       vm.$el.querySelector('.form-control').value,
     ).toBe('test');
   });
+
+  it('triggers update with meta+enter', () => {
+    vm.$el.querySelector('.form-control').dispatchEvent(keyboardDownEvent(13, true));
+
+    expect(
+      eventHub.$emit,
+    ).toHaveBeenCalled();
+  });
+
+  it('triggers update with ctrl+enter', () => {
+    vm.$el.querySelector('.form-control').dispatchEvent(keyboardDownEvent(13, false, true));
+
+    expect(
+      eventHub.$emit,
+    ).toHaveBeenCalled();
+  });
 });

spec/javascripts/issue_show/helpers.js

+// eslint-disable-next-line import/prefer-default-export
+export const keyboardDownEvent = (code, metaKey = false, ctrlKey = false) => {
+  const e = new CustomEvent('keydown');
+
+  e.keyCode = code;
+  e.metaKey = metaKey;
+  e.ctrlKey = ctrlKey;
+
+  return e;
+};