fix event listeners not registering for events with multiple words (#73)

Bloomca · Jul 26, 2024 · f239eb9 · f239eb9
1 parent af9795d
commit f239eb9
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 7 deletions.
diff --git a/integration-tests/assign-attributes.test.ts b/integration-tests/assign-attributes.test.ts
@@ -298,4 +298,75 @@ describe("assign-attributes", () => {
     expect(spyFn).toHaveBeenCalledTimes(3);
     expect(state.getValue()).toBe(4);
   });
+
+  test("adds listeners with multiple words in them correctly", async () => {
+    const user = userEvent.setup();
+    const spyFn = jest.fn();
+    function App() {
+      const handler = () => {
+        spyFn();
+      };
+      return createElement("div", {
+        children: [
+          createElement("button", {
+            "data-testid": "button",
+            onDblClick: handler,
+          }),
+        ],
+      });
+    }
+
+    cleanup = attachComponent({
+      htmlElement: document.body,
+      component: createElement(App),
+    });
+
+    const btn = screen.getByTestId("button");
+
+    await user.dblClick(btn);
+    expect(spyFn).toHaveBeenCalledTimes(1);
+  });
+
+  it("allows to assign and remove event listeners dynamically passing the same callback with multiple words in event", async () => {
+    const user = userEvent.setup();
+    const state = createState(0);
+    const spyFn = jest.fn();
+    function App() {
+      const handler = () => {
+        spyFn();
+        state.setValue((currentValue) => currentValue + 1);
+      };
+      return createElement("div", {
+        children: [
+          createElement("button", {
+            "data-testid": "button",
+            onDblClick: state.useAttribute((value) =>
+              value !== 0 && value < 4 ? handler : undefined
+            ),
+          }),
+        ],
+      });
+    }
+
+    cleanup = attachComponent({
+      htmlElement: document.body,
+      component: createElement(App),
+    });
+
+    const btn = screen.getByTestId("button");
+
+    await user.dblClick(btn);
+    await user.dblClick(btn);
+
+    state.setValue(1);
+
+    await user.dblClick(btn);
+    await user.dblClick(btn);
+    await user.dblClick(btn);
+    await user.dblClick(btn);
+    await user.dblClick(btn);
+
+    expect(spyFn).toHaveBeenCalledTimes(3);
+    expect(state.getValue()).toBe(4);
+  });
 });
diff --git a/src/create-element/assign-attributes.ts b/src/create-element/assign-attributes.ts
@@ -34,11 +34,7 @@ function assignAttribute({
     typeof value === "function" &&
     key.startsWith("on")
   ) {
-    // TODO: think if this is robust enough
-    htmlElement.addEventListener(
-      key[2].toLocaleLowerCase() + key.slice(3),
-      value
-    );
+    htmlElement.addEventListener(key.slice(2).toLocaleLowerCase(), value);
   } else {
     if (typeof value === "boolean") {
       // according to the spec, boolean values should just get either an empty string

diff --git a/src/create-state/update-useattribute-value.ts b/src/create-state/update-useattribute-value.ts
@@ -28,8 +28,7 @@ function updateUseAttributeValue<T>({
       return;
     }
 
-    const eventName =
-      attributeName[2].toLocaleLowerCase() + attributeName.slice(3);
+    const eventName = attributeName.slice(2).toLocaleLowerCase();
     if (attributeValue) {
       // we remove the previous value, `removeEventListener` needs
       // to have the same value as the one that was added