Update CreateIssueForm to support Japanese IME

Switching from triggering the form submission on @keyup.enter to a regular form submission
prevents accidentally submitting the form while composing a phrase via IME

Changelog: changed
EE: true

ee/app/assets/javascripts/related_items_tree/components/create_issue_form.vue

@@ -200,7 +200,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <form data-testid="form" @submit.prevent="createIssue">
     <div class="row mb-3">
       <div class="col-sm-6 gl-mb-3 gl-sm-mb-0">
         <label class="label-bold">{{ s__('Issue|Title') }}</label>
@@ -212,7 +212,6 @@ export default {
             parentItem.confidential ? __('New confidential issue title') : __('New issue title')
           "
           autofocus
-          @keyup.enter="createIssue"
         />
       </div>
       <div class="col-sm-6">
@@ -297,6 +296,7 @@ export default {
         variant="confirm"
         category="primary"
         size="small"
+        type="submit"
         class="gl-mr-2"
         data-testid="submit-button"
         :disabled="isIssueCreationDisabled"
@@ -308,5 +308,5 @@ export default {
         __('Cancel')
       }}</gl-button>
     </div>
-  </div>
+  </form>
 </template>

ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js

@@ -13,7 +13,6 @@ import Vuex from 'vuex';
 import MockAdapter from 'axios-mock-adapter';
 
 import axios from '~/lib/utils/axios_utils';
-import { ENTER_KEY } from '~/lib/utils/keys';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
@@ -59,6 +58,7 @@ describe('CreateIssueForm', () => {
   const findDropdownHeader = () => wrapper.findComponent(GlDropdownSectionHeader);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findDropdownItem = (index) => findDropdownItems().at(index);
+  const findForm = () => wrapper.findByTestId('form');
   const findIssueTitleInput = () => wrapper.findComponent(GlFormInput);
   const findIssueTitleLabel = () => wrapper.findAll('label').at(0);
   const findProjectItem = (project) => wrapper.findByTestId(`project-item-${project.id}`);
@@ -161,13 +161,14 @@ describe('CreateIssueForm', () => {
         expect(input.attributes('value')).toBe('');
       });
 
-      it('emits event `submit` on enter', async () => {
+      it('emits event `submit` when form is submitted', async () => {
         const input = findTitleInput();
         const endpoint = Api.buildUrl(Api.projectCreateIssuePath).replace(':id', mockProject.id);
 
         await selectProject();
         await input.vm.$emit('input', 'Some issue');
-        await input.vm.$emit('keyup', new KeyboardEvent({ key: ENTER_KEY }));
+
+        await findForm().trigger('submit');
 
         expect(wrapper.emitted('submit')[0]).toEqual(
           expect.arrayContaining([{ issuesEndpoint: endpoint, title: 'Some issue' }]),