1 files changed, 10 insertions, 24 deletions
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
index 9d2a0769add..1ba21bdae83 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
@@ -44,16 +44,15 @@ export default {
   },
   methods: {
     openModal() {
-      const emojiAutocomplete = new GfmAutoComplete();
-      emojiAutocomplete.setup($(this.$refs.statusMessageField), { emojis: true });
-
       this.$root.$emit('bv::show::modal', this.modalId);
     },
     closeModal() {
       this.$root.$emit('bv::hide::modal', this.modalId);
     },
-    loadEmojiList() {
+    setupEmojiListAndAutocomplete() {
       const toggleEmojiMenuButtonSelector = '#set-user-status-modal .js-toggle-emoji-menu';
+      const emojiAutocomplete = new GfmAutoComplete();
+      emojiAutocomplete.setup($(this.$refs.statusMessageField), { emojis: true });
 
       import(/* webpackChunkName: 'emoji' */ '~/emoji')
         .then(Emoji => {
@@ -151,9 +150,14 @@ export default {
   <gl-ui-modal
     :title="s__('SetStatusModal|Set a status')"
     :modal-id="modalId"
+    :ok-title="s__('SetStatusModal|Set status')"
+    :cancel-title="s__('SetStatusModal|Clear status')"
+    ok-variant="success"
     class="set-user-status-modal"
-    @shown="loadEmojiList"
+    @shown="setupEmojiListAndAutocomplete"
     @hide="hideEmojiMenu"
+    @ok="setStatus"
+    @cancel="clearStatus"
   >
     <div>
       <input
@@ -206,7 +210,7 @@ export default {
             class="form-control form-control input-lg js-status-message-field"
             name="user[status][message]"
             @keyup="setDefaultEmoji"
-            @keyup.enter="setStatus()"
+            @keyup.enter.prevent
             @click="hideEmojiMenu"
           />
           <span class="input-group-btn">
@@ -225,23 +229,5 @@ export default {
         </div>
       </div>
     </div>
-    <template slot="modal-footer">
-      <button
-        type="button"
-        class="btn js-modal-cancel-action"
-        data-dismiss="modal"
-        @click="clearStatus()"
-      >
-        {{ s__('SetStatusModal|Clear status') }}
-      </button>
-      <button
-        type="button"
-        class="btn btn-success js-modal-primary-action"
-        data-dismiss="modal"
-        @click="setStatus()"
-      >
-        {{ s__('SetStatusModal|Set status') }}
-      </button>
-    </template>
   </gl-ui-modal>
 </template>