nullstack · Mortaro · Feb 20, 2022 · Feb 19, 2022
diff --git a/client/render.js b/client/render.js
@@ -29,15 +29,17 @@ export default function render(node, options) {
       element.innerHTML = node.attributes[name];
       anchorableElement(element);
     } else if (name.startsWith('on')) {
-      const eventName = name.replace('on', '');
-      const key = '_event.' + eventName;
-      node[key] = (event) => {
-        if (node.attributes.default !== true) {
-          event.preventDefault();
-        }
-        node.attributes[name]({ ...node.attributes, event });
-      };
-      element.addEventListener(eventName, node[key]);
+      if (node.attributes[name] !== undefined) {
+        const eventName = name.replace('on', '');
+        const key = '_event.' + eventName;
+        node[key] = (event) => {
+          if (node.attributes.default !== true) {
+            event.preventDefault();
+          }
+          node.attributes[name]({ ...node.attributes, event });
+        };
+        element.addEventListener(eventName, node[key]);
+      }
     } else {
       const type = typeof (node.attributes[name]);
       if (type !== 'object' && type !== 'function') {

diff --git a/tests/src/StatefulComponent.njs b/tests/src/StatefulComponent.njs
@@ -3,26 +3,27 @@ import Nullstack from 'nullstack';
 class StatefulComponent extends Nullstack {
 
   count = 1;
-  object = {count: 0};
+  object = { count: 0 };
   prepared = 0;
   date = new Date('1992-10-16');
   empty = '';
+  visible = false;
 
   prepare() {
     this.prepared++;
   }
 
-  increment({by}) {
+  increment({ by }) {
     this.count += by;
   }
 
   incrementByOne() {
     this.count++;
   }
-  
-  render({self}) {
+
+  render({ self }) {
     return (
-      <form> 
+      <form>
         {self.hydrated &&
           <div data-tag={self.element.tagName.toLowerCase()} />
         }
@@ -32,20 +33,22 @@ class StatefulComponent extends Nullstack {
         <button class="increment-by-two" onclick={this.increment} by={2}>
           +2
         </button>
-        <button class="set-to-one" onclick={{count: 1}}>
+        <button class="set-to-one" onclick={{ count: 1 }}>
           =1
         </button>
-        <button class="set-object-to-one" source={this.object} onclick={{count: 1}}>
+        <button class="set-object-to-one" source={this.object} onclick={{ count: 1 }}>
           =1
         </button>
         <p data-empty={this.empty}>{this.empty}</p>
-        <button onclick={{empty: 'not'}} data-fill> fill </button>
+        <button onclick={{ empty: 'not' }} data-fill> fill </button>
         <>
           <div data-prepared={this.prepared} />
           <div data-count={this.count} />
           <div data-object-count={this.object.count} />
           <div data-year={this.date.getFullYear()} />
         </>
+        <button onclick={{ visible: !this.visible }} data-toggle> Toggle </button>
+        {this.visible && <button onclick={undefined} data-undefined-event> button </button>}
       </form>
     )
   }

diff --git a/tests/src/StatefulComponent.test.js b/tests/src/StatefulComponent.test.js
@@ -54,4 +54,14 @@ describe('StatefulComponent', () => {
     expect(text).toMatch('not');
   });
 
+  test('rendered attributes undefined values do not raise errors', async () => {
+    await page.click('[data-toggle]');
+    await page.waitForSelector('[data-undefined-event]');
+    await page.click('[data-undefined-event]');
+    let hasConsoleError = false
+    page.on("console", () => hasConsoleError = true)
+    await page.waitForTimeout(2000)
+    expect(hasConsoleError).toBeFalsy();
+  });
+
 });