#22 - Ensure event handlers aren't duplicated

src/index.js

@@ -9,16 +9,16 @@ const defaults = {
 function syncEvent(node, eventName, newEventHandler) {
   const eventNameLc = eventName.toLowerCase();
   const eventStore = node.__events || (node.__events = {});
-  const oldEventHandler = eventStore[eventName];
+  const oldEventHandler = eventStore[eventNameLc];
 
   // Remove old listener so they don't double up.
   if (oldEventHandler) {
-    node.removeEventListener(eventName, oldEventHandler);
+    node.removeEventListener(eventNameLc, oldEventHandler);
   }
 
   // Bind new listener.
   if (newEventHandler) {
-    node.addEventListener(eventNameLc, eventStore[eventName] = function handler(e) {
+    node.addEventListener(eventNameLc, eventStore[eventNameLc] = function handler(e) {
       newEventHandler.call(this, e);
     });
   }

test/unit.js

@@ -1,5 +1,5 @@
 import './unit/children';
-import './unit/custom-events';
+import './unit/events';
 import './unit/display-name';
 import './unit/errors';
 import './unit/prop-types';

test/unit/custom-events.js → test/unit/events.js

@@ -42,4 +42,28 @@ describe('custom events', () => {
       done();
     }, 1);
   });
+
+  it('should not duplicate handlers', done => {
+    let count = 0;
+    const Comp = reactify(document.registerElement('x-custom-event-3', {
+      prototype: Object.create(HTMLElement.prototype, {
+        trigger: {
+          value() {
+            this.dispatchEvent(new CustomEvent('test'));
+          },
+        },
+      }),
+    }), { React, ReactDOM });
+
+    const func = () => ++count;
+
+    // Using both ontest and onTest (case-sensitive) test case-sensitivity.
+    const comp = ReactDOM.render(<Comp ontest={func} onTest={func} />, window.fixture);
+
+    setTimeout(() => {
+      ReactDOM.findDOMNode(comp).trigger();
+      expect(count).to.equal(1);
+      done();
+    }, 1);
+  });
 });