Merge pull request #2527 from tchak/add-remote-input-event-support

Patch remote ujs handler with debounced input support

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();

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';

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));

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",

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"