Prevent rapid typing from updating the currently focused element. Try to handle the edge where a model and action are on the same element and fire at the same time. #100

Author: adamghill

django_unicorn/static/js/component.js

@@ -150,13 +150,15 @@ export class Component {
     };
     this.actionQueue.push(action);
 
-    this.queueMessage(-1, (triggeringElements, err) => {
+    this.queueMessage(-1, (triggeringElements, _, err) => {
       if (err && isFunction(errCallback)) {
         errCallback(err);
       } else if (err) {
         console.error(err);
       } else {
-        this.setModelValues(triggeringElements);
+        // Can hard-code `forceModelUpdate` to `true` since it is always required for
+        // `callMethod` actions
+        this.setModelValues(triggeringElements, true);
         this.setDbModelValues();
       }
     });
@@ -316,14 +318,17 @@ export class Component {
    * Sets all model values.
    * @param {[Element]} triggeringElements The elements that triggered the event.
    */
-  setModelValues(triggeringElements) {
+  setModelValues(triggeringElements, forceModelUpdates) {
     triggeringElements = triggeringElements || [];
+    forceModelUpdates = forceModelUpdates || false;
 
-    // Focus on the last element on what triggered the update.
+    let lastTriggeringElement = null;
+
+    // Focus on the last element which triggered the update.
     // Prevents validation errors from stealing focus.
     if (triggeringElements.length > 0) {
       let elementFocused = false;
-      const lastTriggeringElement = triggeringElements.slice(-1)[0];
+      lastTriggeringElement = triggeringElements.slice(-1)[0];
 
       if (
         hasValue(lastTriggeringElement) &&
@@ -347,7 +352,13 @@ export class Component {
     }
 
     this.modelEls.forEach((element) => {
-      this.setValue(element);
+      if (
+        !lastTriggeringElement ||
+        !lastTriggeringElement.isSame(element) ||
+        forceModelUpdates
+      ) {
+        this.setValue(element);
+      }
     });
   }
 

django_unicorn/static/js/eventListeners.js

@@ -290,11 +290,19 @@ export function addModelEventListener(component, el, eventType) {
 
     component.queueMessage(
       element.model.debounceTime,
-      (triggeringElements, err) => {
+      (triggeringElements, forceModelUpdate, err) => {
         if (err) {
           console.error(err);
         } else {
-          component.setModelValues(triggeringElements);
+          triggeringElements = triggeringElements || [];
+
+          // Make sure that the current element is included in the triggeringElements
+          // if for some reason it is missing
+          if (!triggeringElements.some((e) => e.isSame(element))) {
+            triggeringElements.push(element);
+          }
+
+          component.setModelValues(triggeringElements, forceModelUpdate);
           component.setDbModelValues();
         }
       }
@@ -355,7 +363,7 @@ export function addDbEventListener(component, el, eventType) {
 
     component.actionQueue.push(action);
 
-    component.queueMessage(element.model.debounceTime, (_, err) => {
+    component.queueMessage(element.model.debounceTime, (_, __, err) => {
       if (err) {
         console.error(err);
       } else {

django_unicorn/static/js/messageSender.js

@@ -16,6 +16,12 @@ export function send(component, callback) {
     return;
   }
 
+  // Since methods can change the data "behind the scenes", any queue with a callMethod
+  // action forces model elements to always be updated
+  const forceModelUpdate = component.actionQueue.some(
+    (a) => a.type === "callMethod"
+  );
+
   // Set the current action queue and clear the action queue in case another event happens
   component.currentActionQueue = component.actionQueue;
   component.actionQueue = [];
@@ -136,7 +142,7 @@ export function send(component, callback) {
       component.currentActionQueue = null;
 
       if (isFunction(callback)) {
-        callback(triggeringElements, null);
+        callback(triggeringElements, forceModelUpdate, null);
       }
     })
     .catch((err) => {