Handle dirty lazy dbModel fields.

Author: adamghill

django_unicorn/static/js/component.js

@@ -148,6 +148,12 @@ export class Component {
             if (!this.attachedDbEvents.some((e) => e.isSame(element))) {
               this.attachedDbEvents.push(element);
               addDbEventListener(this, element);
+
+              // If a field is lazy, also add an event listener for input for dirty states
+              if (element.field.isLazy) {
+                // This input event for isLazy will be stopped after dirty is checked when the event fires
+                addDbEventListener(this, element, "input");
+              }
             }
 
             if (!this.dbEls.some((e) => e.isSame(element))) {
@@ -162,7 +168,7 @@ export class Component {
               this.attachedModelEvents.push(element);
               addModelEventListener(this, element);
 
-              // If an element is lazy, also add an event listener for input for dirty states
+              // If a model is lazy, also add an event listener for input for dirty states
               if (element.model.isLazy) {
                 // This input event for isLazy will be stopped after dirty is checked when the event fires
                 addModelEventListener(this, element, "input");

django_unicorn/static/js/eventListeners.js

@@ -360,6 +360,12 @@ export function addDbEventListener(component, element, eventType) {
       }
     }
 
+    // Lazy models fire an input and blur so that the dirty check above works as expected.
+    // This will prevent the input event from doing anything.
+    if (element.field.isLazy && eventType === "input") {
+      return;
+    }
+
     if (!component.lastTriggeringElements.some((e) => e.isSame(element))) {
       component.lastTriggeringElements.push(element);
     }

example/unicorn/templates/unicorn/models.html

@@ -68,7 +68,7 @@ <h3>Last 2 added flavors</h3>
             <h4>PK: {{ flavor.pk }}</h4>
             <div>
                 <label>Name</label>
-                <input type="text" unicorn:field.defer="name" u:dirty.class="dirty"></input>
+                <input type="text" unicorn:field.lazy="name" u:dirty.class="dirty"></input>
 
                 <strong>Name</strong> {{ flavor.name }}
             </div>