Component Props type incorrectly includes ref

[rhys-vdw]

Here this type extends HTMLProps instead of HTMLAttributes. This incorrectly makes the component think that it receives a ref type, which is incorrect.

This comes into play in this situation:

import React, { StatelessComponent } from "react"
import TextareaAutosize from "react-autosize-textarea"
import { TextareaAutosize as TextareaAutosizeTypes } from "react-autosize-textarea/lib/TextareaAutosize"
import classNames from "classnames"
import styles from "./display-textarea.module.scss"

const DisplayTextarea: StatelessComponent<TextareaAutosizeTypes.Props> = ({ className, ...rest }) => {
  return <TextareaAutosize className={classNames(styles.textarea, className)} {...rest} /> // ERROR
}

export default DisplayTextarea

[ts]
Type '{ accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean | undefined; allowTransparency?: boolean | undefined; alt?: string | undefined; ... 352 more ...; className: string; }' is not assignable to type 'IntrinsicClassAttributes<TextareaAutosize>'.
  Types of property 'ref' are incompatible.
    Type 'string | ((instance: HTMLTextAreaElement | null) => any) | RefObject<HTMLTextAreaElement> | undefined' is not assignable to type 'string | ((instance: TextareaAutosize | null) => any) | RefObject<TextareaAutosize> | undefined'.
      Type '(instance: HTMLTextAreaElement | null) => any' is not assignable to type 'string | ((instance: TextareaAutosize | null) => any) | RefObject<TextareaAutosize> | undefined'.
        Type '(instance: HTMLTextAreaElement | null) => any' is not assignable to type 'RefObject<TextareaAutosize>'.
          Property 'current' is missing in type '(instance: HTMLTextAreaElement | null) => any'.

The workaround:

// Removing `ref` here -- seems to be an error in `TextareaAutosize`'s props.
const DisplayTextarea: StatelessComponent<TextareaAutosizeTypes.Props> = ({ className, ref, ...rest }) => {
  return <TextareaAutosize className={classNames(styles.textarea, className)} {...rest} />
}

Also, this is annoying:

import TextareaAutosize from "react-autosize-textarea"
import { TextareaAutosize as TextareaAutosizeTypes } from "react-autosize-textarea/lib/TextareaAutosize"

This is due to indirection via index.d.ts.

Would it be possible to import like so:

import TextareaAutosize, { TextareaAutosizeProps } from "react-autosize-textarea"
// or
import TextareaAutosize, { Props } from "react-autosize-textarea"

[giogonzo]

Hey @rhys-vdw, both suggestions make sense. I put up #105 which should solve both issues in a breaking way, could you please test this version npm i react-autosize-textarea@next and see if it solves for you?

This now works:

import * React from "react"
import TextareaAutosize from "react-autosize-textarea"

const DisplayTextarea: React.SFC<TextareaAutosize.Props> = ({ className, ...rest }) => {
  return <TextareaAutosize className={className} {...rest} />
}

[rhys-vdw]

Hey @giogonzo sorry, I left a comment.

[rhys-vdw]

Requesting this issue be reopened. The types are still wrong.

Exclude<keyof React.HTMLProps<HTMLTextAreaElement>, 'ref'>

Is incorrect, the type should be:

React.TextareaHTMLAttributes<HTMLTextAreaElement>

The types you have include all possible HTML element properties. This is simply not the right type, and the correct one is provided by React in the form of TextareaHTMLAttributes.

[rhys-vdw]

I'm happy to open a PR.