[lit/react] Fix event binding erroneously being set on custom element…

… instance (#4572)

.changeset/spotty-dolls-confess.md

@@ -0,0 +1,5 @@
+---
+'@lit/react': patch
+---
+
+Fix issue where event handler prop was incorrectly being set on the underlying custom element instance and potentially overriding an existing method/property.

packages/react/src/create-component.ts

@@ -165,8 +165,10 @@ const setProperty = <E extends Element>(
 ) => {
   const event = events?.[name];
   // Dirty check event value.
-  if (event !== undefined && value !== old) {
-    addOrUpdateEventListener(node, event, value as (e?: Event) => void);
+  if (event !== undefined) {
+    if (value !== old) {
+      addOrUpdateEventListener(node, event, value as (e?: Event) => void);
+    }
     return;
   }
   // But don't dirty check properties; elements are assumed to do this.

packages/react/src/test/create-component_test.tsx

@@ -514,6 +514,18 @@ suite('createComponent', () => {
     assert.equal(fooEvent2, undefined);
   });
 
+  // Regression test for https://github.com/lit/lit/issues/4569
+  test('event prop should not be set on instance', async () => {
+    const handler = () => {};
+    render(<BasicElementComponent onFoo={handler} />);
+    const el = container.querySelector(tagName)!;
+    assert.notProperty(el, 'onFoo');
+
+    // Render again with the same handler
+    render(<BasicElementComponent onFoo={handler} />);
+    assert.notProperty(el, 'onFoo');
+  });
+
   test('can listen to native events', async () => {
     let clickEvent!: React.MouseEvent;
     render(