Support events on elements that need to be handled by a unicorn parent.

Author: adamghill

django_unicorn/static/js/element.js

@@ -198,6 +198,26 @@ export class Element {
     return generateDbKey(this);
   }
 
+  /**
+   * Get the element's next parent that is a unicorn element.
+   *
+   * Returns `null` if no unicorn element can be found before the root.
+   */
+  getUnicornParent() {
+    // const parentEl = this.el.parentElement;
+    let parentElement = this.parent;
+
+    while (!parentElement.isUnicorn) {
+      if (parentElement.el.getAttribute("unicorn:checksum")) {
+        return null;
+      }
+
+      parentElement = parentElement.parent;
+    }
+
+    return parentElement;
+  }
+
   /**
    * Check if another `Element` is the same as this `Element`.
    * @param {Element} other

django_unicorn/static/js/eventListeners.js

@@ -17,7 +17,12 @@ import { Element } from "./element.js";
  */
 export function addActionEventListener(component, eventType) {
   component.document.addEventListener(eventType, (event) => {
-    const targetElement = new Element(event.target);
+    let targetElement = new Element(event.target);
+
+    // Make sure that the target element is a unicorn element.
+    if (targetElement && !targetElement.isUnicorn) {
+      targetElement = targetElement.getUnicornParent();
+    }
 
     if (
       targetElement &&

tests/js/element/action.test.js

@@ -50,7 +50,23 @@ test("multiple actions", (t) => {
   t.true(element.actions[1].eventType === "keydown");
 });
 
-test("$event action variable invaid property", (t) => {
+test("click on internal element", (t) => {
+  const html = `
+<div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+  <input unicorn:model='name'></input>
+  <button unicorn:click='test()'><span id="clicker">Click</span></button>
+</div>`;
+  const component = getComponent(html);
+
+  t.is(component.attachedEventTypes.length, 1);
+  t.is(component.actionEvents.click.length, 1);
+
+  component.actionEvents.click[0].element.el.children[0].click();
+
+  t.is(component.actionQueue.length, 1);
+});
+
+test("$event action variable invalid property", (t) => {
   const html = `
 <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
   <input unicorn:model='name'></input>