7.1 version breaks TypeScript projects by declaring optional properties as required

[ngbrown]

There is no v7.1 tag in this repository, but it is appearing as latest on npm.

Once I updated my project to that version, I am getting the following error:

TypeScript error in D:/dev/xxxx.tsx(64,10):
Property 'translate' is missing in type '{ onFocus: (event: {}) => void; type: string; className: string; rows: number; }' but required in type 'Pick<HTMLProps<HT
MLTextAreaElement>, "default" | "key" | "value" | "is" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | ... 347 more ... | "wmode">
'.  TS2741

when being used like this:

        <TextareaAutosize
          type="text"
          className="form-control"
          rows={4}
        />

Even adding a translate={'no'} property doesn't resolve the error.

Going back to react-autosize-textarea@7.0.0 (without the translate property) also resolves the error.

[giogonzo]

Hi @ngbrown I can't repro, could you provide some info on your setup / TS version?

[ngbrown]

I'm using typescript@3.8.2 in an ejected create-react-app project. It's not up to date on every other dependency, so if it's not this slightly older typescript version, I can try to put together a reproduction.

[ngbrown]

When updated to typescript@3.9.7, it still has this error.

I'm using the older react@16.8.6 and react-dom@16.8.6, with the corresponding @types/react@16.8.25 and @types/react-dom@16.8.5. I'm doing this because there are still some now obsoleted lifecycle methods in my dependencies.

When I update to the latest react, react-dom, and types, then the error clears.

I think this must be because this library is requiring a newer react type dependency that has added translate to HTMLAttributes<T>.

Maybe relying on the oldest possible version of the types would fix this? Or using a peer-dependency instead?

[peterj35]

I'm getting an error likely related to this, with v7.1:

TypeScript error in /Users/peter/workspace/packages/web-ui/src/components/Form.tsx(562,8):
Type '{ name?: string | undefined; form?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; key?: string | number | undefined; autoComplete?: string | undefined; ... 262 more ...; ref: ((instance: HTMLTextAreaElement | null) => void) | ... 1 more ... | null; }' is not assignable to type 'Pick<HTMLProps<HTMLTextAreaElement>, "name" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "key" | ... 348 more ... | "translate">'.
  Types of property 'inputMode' are incompatible.
    Type 'string | undefined' is not assignable to type '"email" | "text" | "none" | "search" | "tel" | "url" | "numeric" | "decimal" | undefined'.
      Type 'string' is not assignable to type '"email" | "text" | "none" | "search" | "tel" | "url" | "numeric" | "decimal" | undefined'.

Just using TextareaAutosize with TS as (not providing an inputMode):

<TextareaAutosize ref={ref} {...rest} />

[markathomas]

Same issue here.