1 files changed, 28 insertions, 0 deletions
diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue
index 3cd1a2525e9..111b670596b 100644
--- a/app/assets/javascripts/batch_comments/components/review_bar.vue
+++ b/app/assets/javascripts/batch_comments/components/review_bar.vue
@@ -2,10 +2,20 @@
 import { mapActions, mapGetters } from 'vuex';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { REVIEW_BAR_VISIBLE_CLASS_NAME } from '../constants';
+import { PREVENT_LEAVING_PENDING_REVIEW } from '../i18n';
 import PreviewDropdown from './preview_dropdown.vue';
 import PublishButton from './publish_button.vue';
 import SubmitDropdown from './submit_dropdown.vue';
 
+function closeInterrupt(event) {
+  event.preventDefault();
+
+  // This is the correct way to write backwards-compatible beforeunload listeners
+  // https://developer.chrome.com/blog/page-lifecycle-api/#the-beforeunload-event
+  /* eslint-disable-next-line no-return-assign, no-param-reassign */
+  return (event.returnValue = PREVENT_LEAVING_PENDING_REVIEW);
+}
+
 export default {
   components: {
     PreviewDropdown,
@@ -25,8 +35,26 @@ export default {
   },
   mounted() {
     document.body.classList.add(REVIEW_BAR_VISIBLE_CLASS_NAME);
+    /*
+     * This stuff is a lot trickier than it looks.
+     *
+     * Mandatory reading: https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+     * Some notable sentences:
+     *     - "[...] browsers may not display prompts created in beforeunload event handlers unless the
+     *         page has been interacted with, or may even not display them at all."
+     *     - "Especially on mobile, the beforeunload event is not reliably fired."
+     *     - "The beforeunload event is not compatible with the back/forward cache (bfcache) [...]
+     *         It is recommended that developers listen for beforeunload only in this scenario, and only
+     *         when they actually have unsaved changes, so as to minimize the effect on performance."
+     *
+     * Please ensure that this is really not working before you modify it, because there are a LOT
+     * of scenarios where browser behavior will make it _seem_ like it's not working, but it actually
+     * is under the right combination of contexts.
+     */
+    window.addEventListener('beforeunload', closeInterrupt, { capture: true });
   },
   beforeDestroy() {
+    window.removeEventListener('beforeunload', closeInterrupt, { capture: true });
     document.body.classList.remove(REVIEW_BAR_VISIBLE_CLASS_NAME);
   },
   methods: {