From bfd35dbc5c362f5dac21c259785e5f641bde2871 Mon Sep 17 00:00:00 2001
From: Sarah Vaupel <vaupel.sarah@campus.lmu.de>
Date: Tue, 19 Nov 2019 19:26:48 +0100
Subject: [PATCH] chore(async-table): refactor

---
 frontend/src/utils/async-table/async-table.js | 22 +++++++++++++++++--
 frontend/src/utils/form/datepicker.js         |  5 +++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/src/utils/async-table/async-table.js b/frontend/src/utils/async-table/async-table.js
index 705edb656..dbb223232 100644
--- a/frontend/src/utils/async-table/async-table.js
+++ b/frontend/src/utils/async-table/async-table.js
@@ -184,10 +184,28 @@ export class AsyncTable {
     });
 
     this._tableFilterInputs.input.forEach((input) => {
+      input.submitLockObserver = new MutationObserver((mutations, observer) => {
+        for (const mutation of mutations) {
+          // if the submit lock has been released, trigger an update and disconnect this observer
+          if (mutation.oldValue === 'true' && input.getAttribute(ATTR_SUBMIT_LOCKED) === 'false') {
+            this._updateFromTableFilter(tableFilterForm);
+            observer.disconnect();
+            break;
+          }
+        }
+      });
+
       const debouncedInput = debounce(() => {
-        const submitLocked = input.getAttribute(ATTR_SUBMIT_LOCKED);
-        if ((submitLocked === 'false' || submitLocked === null) && (input.value.length === 0 || input.value.length > 2)) {
+        const submitLocked = input.getAttribute(ATTR_SUBMIT_LOCKED) === 'true';
+        if (!submitLocked && (input.value.length === 0 || input.value.length > 2)) {
           this._updateFromTableFilter(tableFilterForm);
+        } else if (submitLocked) {
+          // observe the submit lock of the input element
+          input.submitLockObserver.observe(input, {
+            attributes: true,
+            attributeFilter: [ATTR_SUBMIT_LOCKED],
+            attributeOldValue: true,
+          });
         }
       }, INPUT_DEBOUNCE);
       input.addEventListener('input', debouncedInput);
diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js
index f91ef3421..ee7b3f5a1 100644
--- a/frontend/src/utils/form/datepicker.js
+++ b/frontend/src/utils/form/datepicker.js
@@ -159,11 +159,12 @@ export class Datepicker {
     // create a mutation observer that observes the datepicker instance class and sets
     // the datepicker-open DOM attribute of the input element if the datepicker has been opened
     const datepickerInstanceObserver = new MutationObserver((mutations) => {
-      mutations.forEach(mutation => {
+      for (const mutation of mutations) {
         if (!mutation.oldValue.includes(DATEPICKER_OPEN_CLASS) && this.datepickerInstance.dt.getAttribute('class').includes(DATEPICKER_OPEN_CLASS)) {
           this._element.setAttribute(ATTR_DATEPICKER_OPEN, true);
+          break;
         }
-      });
+      }
     });
     datepickerInstanceObserver.observe(this.datepickerInstance.dt, {
       attributes: true,