From e033ec3404b53992522034df8cce7ae99e2bf67a Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Thu, 3 Sep 2020 12:52:42 +0000
Subject: [PATCH] js: ignore missing DOM element on ProgressBar

Currently ProgressBar is used to monitor upload progress of attachments.

But there's two cases where the associated DOM element may be removed:

- In the champs editor, when the list scrolls, DOM elements are removed
and added dynamically by React;
- In the user form, the user might start an upload on a repetition, and
then remove the associated row during the download.

In both those cases, we don't want the missing DOM element to trigger
an error.
---
 .../shared/activestorage/progress-bar.js      | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/javascript/shared/activestorage/progress-bar.js b/app/javascript/shared/activestorage/progress-bar.js
index 14efed061..fbc3797a9 100644
--- a/app/javascript/shared/activestorage/progress-bar.js
+++ b/app/javascript/shared/activestorage/progress-bar.js
@@ -7,6 +7,12 @@ const COMPLETE_CLASS = 'direct-upload--complete';
   rendering upload progress bar. It is used to handle
   direct-upload form ujs events but also in the
   Uploader delegate used with uploads on json api.
+
+  As the associated DOM element may disappear for some
+  reason (a dynamic React list, an element being removed
+  and recreated again later, etc.), this class doesn't
+  raise any error if the associated DOM element cannot
+  be found.
   */
 export default class ProgressBar {
   static init(input, id, file) {
@@ -17,27 +23,31 @@ export default class ProgressBar {
 
   static start(id) {
     const element = getDirectUploadElement(id);
-
-    element.classList.remove(PENDING_CLASS);
+    if (element) {
+      element.classList.remove(PENDING_CLASS);
+    }
   }
 
   static progress(id, progress) {
     const element = getDirectUploadProgressElement(id);
-
-    element.style.width = `${progress}%`;
+    if (element) {
+      element.style.width = `${progress}%`;
+    }
   }
 
   static error(id, error) {
     const element = getDirectUploadElement(id);
-
-    element.classList.add(ERROR_CLASS);
-    element.setAttribute('title', error);
+    if (element) {
+      element.classList.add(ERROR_CLASS);
+      element.setAttribute('title', error);
+    }
   }
 
   static end(id) {
     const element = getDirectUploadElement(id);
-
-    element.classList.add(COMPLETE_CLASS);
+    if (element) {
+      element.classList.add(COMPLETE_CLASS);
+    }
   }
 
   static render(id, filename) {