Argument types not being inferred in event handler props when composing components

[jakelazaroff]

Bug report

Describe the bug

When using composing a component that uses any of the *HTMLAttributes interfaces from React, TypeScript no longer infers the types of arguments to event handlers.

Weirdly, it infers correctly if you use the plain HTMLAttributes interface… but only if some other prop is causing an error 🥴

To Reproduce

Reduced test case:

import { InputHTMLAttributes } from "react";
import { createCss } from "@stitches/react";

const { styled } = createCss({});

type InputProps = InputHTMLAttributes<HTMLInputElement>;

function Input(props: InputProps) {
  return <input {...props} />;
}

const StyledInput = styled(Input, {});

export default function App() {
  // Parameter 'e' implicitly has an 'any' type. ts(7006)
  return <StyledInput onChange={(e) => console.log(e)} />;
}

Here's a sandbox with a more comprehensive example: https://codesandbox.io/s/dreamy-oskar-chq4z?file=/src/App.tsx

Expected behavior

TypeScript should infer the correct type for the event handler arguments.

[jonathantneal]

This is now working in #659 —

import { InputHTMLAttributes } from 'react'
import { createCss } from '@stitches/react'

const { styled } = createCss({})

function Input(props: InputHTMLAttributes<HTMLInputElement>) {
  return <input {...props} />
}

const StyledInput = styled(Input)

export default function App() {
  return (
    <>
      <Input onChange={(e) => console.log(e)} />
      <StyledInput onChange={(e) => console.log(e)} />
    </>
  )
}

[peduarte]

Fixed in V1. Please refer to migration guide and changelog