From 8c8e7f3ef35d1adc1c1d7e752b9099cc1aa95b1d Mon Sep 17 00:00:00 2001
From: Paul Chavard <git@paul.chavard.net>
Date: Tue, 28 Aug 2018 15:42:16 +0100
Subject: [PATCH] Patch remote ujs handler with debounced input support

---
 app/javascript/packs/application-old.js |  1 +
 app/javascript/packs/application.js     |  1 +
 app/javascript/shared/remote-input.js   | 24 ++++++++++++++++++++++++
 package.json                            |  1 +
 yarn.lock                               |  4 ++++
 5 files changed, 31 insertions(+)
 create mode 100644 app/javascript/shared/remote-input.js

diff --git a/app/javascript/packs/application-old.js b/app/javascript/packs/application-old.js
index 5bd38c5ea..44fa321c8 100644
--- a/app/javascript/packs/application-old.js
+++ b/app/javascript/packs/application-old.js
@@ -12,6 +12,7 @@ import '../shared/sentry';
 import '../shared/rails-ujs-fix';
 import '../shared/safari-11-file-xhr-workaround';
 import '../shared/autocomplete';
+import '../shared/remote-input';
 
 // Start Rails helpers
 Rails.start();
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 563e8a386..64c5c01c7 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -14,6 +14,7 @@ import '../shared/sentry';
 import '../shared/rails-ujs-fix';
 import '../shared/safari-11-file-xhr-workaround';
 import '../shared/autocomplete';
+import '../shared/remote-input';
 
 import '../new_design/buttons';
 import '../new_design/form-validation';
diff --git a/app/javascript/shared/remote-input.js b/app/javascript/shared/remote-input.js
new file mode 100644
index 000000000..d03e69640
--- /dev/null
+++ b/app/javascript/shared/remote-input.js
@@ -0,0 +1,24 @@
+import Rails from 'rails-ujs';
+import debounce from 'debounce';
+
+const { delegate, fire } = Rails;
+
+const remote = 'data-remote';
+const inputChangeSelector = `input[${remote}], textarea[${remote}]`;
+
+// This is a patch for ujs remote handler. Its purpose is to add
+// a debounced input listener.
+function handleRemote(event) {
+  const element = this;
+
+  if (isRemote(element)) {
+    fire(element, 'change', event);
+  }
+}
+
+function isRemote(element) {
+  const value = element.getAttribute(remote);
+  return value && value !== 'false';
+}
+
+delegate(document, inputChangeSelector, 'input', debounce(handleRemote, 200));
diff --git a/package.json b/package.json
index 2e512ce4a..b68dcd7ed 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "activestorage": "^5.2.0",
     "autocomplete.js": "^0.31.0",
     "chartkick": "^2.3.6",
+    "debounce": "^1.2.0",
     "highcharts": "^6.1.1",
     "jquery": "^3.3.1",
     "leaflet": "^1.3.1",
diff --git a/yarn.lock b/yarn.lock
index f09c468b5..72a33df3d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2137,6 +2137,10 @@ dateformat@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
 
+debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+
 debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"