[@lit-labs/react]: awkward types when component event name clashes with built-in event name

Description

If you create a react wrapper with a prop name like onInput or onChange then the resulting types force you to accept a union as the type for your param.

Steps to Reproduce

1. Write this code

import { render } from "react-dom";
import React from "react";
import { createComponent } from "@lit-labs/react";
import { MyInput } from "./web-component";

const MyReactInput = createComponent(React, "my-input", MyInput, {
  onInput: "input"
});

function handleInput(e: Event) {
  console.log(e);
}

render(
  <MyReactInput label="test" onInput={handleInput} />, // error here!
  document.getElementById("root")
);

1. See this output…

Live Reproduction Link

Sorry, i went with codesandbox rather than stackblitz since i already had a sandbox i could fork for convenience

https://codesandbox.io/s/cool-liskov-7sv9eo?file=/src/index.tsx

Expected Results

I should not have to use a union to type my event handlers, Event should suffice (or whatever is idiomatic in React/TS world)

Actual Results

Type '(e: Event) => void' is not assignable to type '((e: Event) => unknown) & FormEventHandler<HTMLElement>'.

Can be worked around by typing the event handler as:

function handleInput(e: Event | FormEvent) {
  console.log(e);
}

Browsers Affected

N/A, typescript issue

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

[taylor-vann]

resolved in #2648

[WickyNilliams]

Wonderful, thank you!

I had been meaning to get back to this, but I’ve been entirely focused on other tasks the last few weeks ahead of a big release. Sadly this fell to the wayside.

If you need me to do some testing of your PR with my design system, let me know and I’ll give it a whirl.

Thanks again!