1 files changed, 16 insertions, 7 deletions
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
index c3a553a7605..5e7b8f9698f 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
@@ -1,4 +1,7 @@
 <script>
+import $ from 'jquery';
+import eventHub from '../../event_hub';
+
 export default {
   props: {
     isLocked: {
@@ -6,11 +9,6 @@ export default {
       type: Boolean,
     },
 
-    toggleForm: {
-      required: true,
-      type: Function,
-    },
-
     updateLockedAttribute: {
       required: true,
       type: Function,
@@ -26,6 +24,17 @@ export default {
       return !this.isLocked;
     },
   },
+
+  methods: {
+    closeForm() {
+      eventHub.$emit('closeLockForm');
+      $(this.$el).trigger('hidden.gl.dropdown');
+    },
+    submitForm() {
+      this.closeForm();
+      this.updateLockedAttribute(this.toggleLock);
+    },
+  },
 };
 </script>
 
@@ -34,7 +43,7 @@ export default {
     <button
       type="button"
       class="btn btn-default append-right-10"
-      @click="toggleForm"
+      @click="closeForm"
     >
       {{ __('Cancel') }}
     </button>
@@ -42,7 +51,7 @@ export default {
     <button
       type="button"
       class="btn btn-close"
-      @click.prevent="updateLockedAttribute(toggleLock)"
+      @click.prevent="submitForm"
     >
       {{ buttonText }}
     </button>