Typing of props for children with Slots (asChild)

[RyKilleen]

It's unclear whether my challenge is a Radix thing, a React/Typescript challenge in general, or a misuse of Slot but I'd appreciate your input!

I'm attempting to use Slot to make it easier to swap custom inputs in a react-hook-form abstraction. Because these components have typed props, they fail type checking since they don't think they're receiving props.

A brief, reduced example:

// Works as expected, but has type errors, since `PrivateInput` doesn't think it's receiving props
const example = () => (
<ControlledInput
    ...
    asChild
>
    { /* A forwardRef component */}
    <PrivateInput someUnrelatedProp={true} />
</ControlledInput>
)

const ControlledInput = ({ label, asChild, children, ...formProps }: Props) => {
  const { field } = useController({...formProps })

  const Comp = asChild ? Slot : Input

  return (
    <>
      <Label>{/*...*/}</Label>
      <Comp
        {...field}
        children={children}
      />
      <ErrorMessage
        name={field.name}
        render={({ message }) => <InputError>{message}</InputError>}
      />
    </>
  )
}


const PrivateInput = forwardRef<HTMLInputElement, ControllerRenderProps>(
  ({ name, ...fields }, ref) => {

    return (
      <div>
        {/* ... */}
        <Input
          {...fields}
          id={name}
          ref={ref}
        />
      </div>
    )
  }
)

I came across #895, @jjenzz 's AsRenderProp recommendation is intriguing, but I'm doing my best to avoid render props if at all possible. I feel like I'm missing something obvious in my implementation, or that it simply isn't doable, but would love some input!

[benoitgrelard]

Hey @RyKilleen, that's mostly a TS limiting right now really.
That said, we still have #895 open as we may be able to eventually improve that as we agree too that it would improve DX even more.