getRootProps and getInputProps Type Error in Vue 3 using Typescript

[mikemattner]

When using Vue 3 with typescript support, adding v-bind="getRootProps()" to the root element is causing the following type error:

Type '{ style: undefined; tabIndex?: number | undefined; onKeyDown: ComposeFunction | null; onFocus: ComposeFunction | null; onBlur: ComposeFunction | null; ... 5 more ...; ref: Ref<...>; }' is not assignable to type 'ElementAttrs<HTMLAttributes>'.
  Type '{ style: undefined; tabIndex?: number | undefined; onKeyDown: ComposeFunction | null; onFocus: ComposeFunction | null; onBlur: ComposeFunction | null; ... 5 more ...; ref: Ref<...>; }' is not assignable to type 'HTMLAttributes'.ts(2322)

A similar kind of type error is happening when adding v-bind="getInputProps()" to the input element:

Type '{ accept: string | string[] | undefined; multiple: boolean | undefined; style: string; type: string; onChange: ComposeFunction | null; onClick: ComposeFunction | null; autoComplete: string; tabIndex: number; ref: Ref<...>; }' is not assignable to type 'ElementAttrs<InputHTMLAttributes>'.
  Type '{ accept: string | string[] | undefined; multiple: boolean | undefined; style: string; type: string; onChange: ComposeFunction | null; onClick: ComposeFunction | null; autoComplete: string; tabIndex: number; ref: Ref<...>; }' is not assignable to type 'InputHTMLAttributes'.ts(2322)

[mikemattner]

As a temporary solution, I could pass those in using the following method:

const asAny = (fn: any) => fn as any;

and then on the item in question to eliminate typescript errors:

<input v-bind="asAny(getInputProps())" />

[Yaxian]

Hi, Could you shoe me which typescript and vue version do you use, or provide a demo link? Thanks.

[mikemattner]

I'm using "vue": "^3.2.27" and "typescript": "~4.5.4"

[Yaxian]

Hi, Try [email protected]. It may work.

Thanks.