Fixed race condition caused by auto refresh updates during form submi…

…ssion
digitallyinduced · Jan 22, 2021 · d5a7e87 · d5a7e87 · harryaskham · Feb 27, 2021
1 parent 68ed2d6
commit d5a7e87
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/lib/IHP/static/helpers.js b/lib/IHP/static/helpers.js
@@ -252,6 +252,10 @@ window.submitForm = function (form, possibleClickedButton) {
             alert.classList.add('dismiss');
         }
     }
+
+    if (window['pauseAutoRefresh']) {
+        window.pauseAutoRefresh();
+    }
 };
 
 function initToggle() {
@@ -398,6 +402,11 @@ window.transitionToNewPage = function (newHtml) {
         newHtml.head.querySelector('meta[property="ihp-auto-refresh-id"]');
 
     if (ihpAutoRefreshId) {
+        var prevIhpAutoRefreshId = document.head.querySelector('meta[property="ihp-auto-refresh-id"]')
+        if (prevIhpAutoRefreshId) {
+            prevIhpAutoRefreshId.remove();
+        }
+
         document.head.appendChild(ihpAutoRefreshId);
     }
 

diff --git a/lib/IHP/static/ihp-auto-refresh.js b/lib/IHP/static/ihp-auto-refresh.js
@@ -1,5 +1,7 @@
 var socket = null;
 var sessionId = null;
+var autoRefreshPaused = false;
+
 function autoRefreshView() {
     var metaTag = document.querySelector('meta[property="ihp-auto-refresh-id"]');
 
@@ -27,6 +29,8 @@ function autoRefreshView() {
         sessionId = metaTag.content;
     }
 
+    autoRefreshPaused = false;
+
     socket.onopen = function (event) {
         socket.send(metaTag.content);
     };
@@ -35,6 +39,11 @@ function autoRefreshView() {
         var html = event.data;
         var parser = new DOMParser();
         var dom = parser.parseFromString(html, 'text/html');
+
+        if (autoRefreshPaused) {
+            return;
+        }
+
         morphdom(document.body, dom.body, {
             getNodeKey: function (el) {
 
@@ -68,6 +77,11 @@ function autoRefreshView() {
     };
 }
 
+/* Called by helpers.js when a form was just submitted and we're waiting for a response from the server */
+window.pauseAutoRefresh = function () {
+    autoRefreshPaused = true;
+};
+
 if (window.Turbolinks) {
     document.addEventListener('turbolinks:load', autoRefreshView);
 } else {