MR commit message: Fix existing message dropdown selection

Changelog: fixed

app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue

@@ -5,6 +5,10 @@ export default {
   components: {
     GlFormTextarea,
   },
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
   props: {
     value: {
       type: String,
@@ -19,11 +23,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      messageText: this.value,
-    };
-  },
 };
 </script>
 
@@ -40,13 +39,13 @@ export default {
       </div>
       <gl-form-textarea
         :id="inputId"
-        v-model="messageText"
+        :value="value"
         class="form-control js-gfm-input gl-mb-3 commit-message-edit !gl-font-monospace"
         dir="auto"
         required="required"
         rows="7"
         max-rows="32"
-        @input="$emit('input', messageText)"
+        @input="(val) => $emit('input', val)"
       />
     </div>
   </li>

app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue

@@ -605,7 +605,7 @@ export default {
                 <ul class="border-top commits-list flex-list gl-list-none gl-p-0 gl-pt-4">
                   <commit-edit
                     v-if="shouldShowSquashEdit"
-                    :value="squashCommitMessage"
+                    v-model="squashCommitMessage"
                     :label="__('Squash commit message')"
                     input-id="squash-message-edit"
                     class="gl-m-0! gl-p-0!"
@@ -617,7 +617,7 @@ export default {
                   </commit-edit>
                   <commit-edit
                     v-if="shouldShowMergeEdit"
-                    :value="commitMessage"
+                    v-model="commitMessage"
                     :label="__('Merge commit message')"
                     input-id="merge-message-edit"
                     class="gl-m-0! gl-p-0!"

spec/frontend/vue_merge_request_widget/components/states/commit_edit_spec.js

@@ -50,10 +50,11 @@ describe('Commits edit component', () => {
     it('emits an input event and receives changed value', async () => {
       const changedCommitMessage = 'Changed commit message';
 
+      wrapper.setProps({ value: changedCommitMessage });
       findTextarea().vm.$emit('input', changedCommitMessage);
 
       await nextTick();
-      expect(wrapper.emitted().input[0]).toEqual([changedCommitMessage]);
+      expect(wrapper.emitted('input')).toEqual([[changedCommitMessage]]);
       expect(findTextarea().props('value')).toBe(changedCommitMessage);
     });
   });