React-aria | typescript error on input/ textfield-CodePudding

I would like to work with react-aria. Unfortunately I don't get this far. I followed the documentation (https://react-spectrum.adobe.com/react-aria/useTextField.html) but this Error pops up on the input Element. Hope somebody can help me.

Code

import { AriaTextFieldOptions, useTextField } from "@react-aria/textfield";

function TextField(props: AriaTextFieldOptions) {
  let ref = useRef<HTMLInputElement>(null);
  let { inputProps } = useTextField(props, ref);

  return (
    <>
      <input {...inputProps} ref={ref} />
    </>
  );
}

Error

Type '{ ref: RefObject<HTMLInputElement>; accept?: string | undefined; alt?: string | undefined; autoComplete?: string | undefined; autoFocus?: boolean | undefined; ... 281 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } | { ...; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Type '{ ref: RefObject<HTMLInputElement>; autoComplete?: string | undefined; autoFocus?: boolean | undefined; cols?: number | undefined; dirName?: string | undefined; ... 263 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
    Type '{ ref: RefObject<HTMLInputElement>; autoComplete?: string | undefined; autoFocus?: boolean | undefined; cols?: number | undefined; dirName?: string | undefined; ... 263 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
      Types of property 'onChange' are incompatible.
        Type 'ChangeEventHandler<HTMLTextAreaElement> | undefined' is not assignable to type 'ChangeEventHandler<HTMLInputElement> | undefined'.
          Type 'ChangeEventHandler<HTMLTextAreaElement>' is not assignable to type 'ChangeEventHandler<HTMLInputElement>'.
            Type 'HTMLTextAreaElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, capture, and 26 more.ts(2322)

Sandbox

https://codesandbox.io/s/hopeful-wood-zicxn?file=/src/App.tsx

Best regards J.

CodePudding user response：

Looks like TypeScript is having difficulty figuring out whether your HTML element is a textarea or an input, so let's give it a hand:

import { AriaTextFieldOptions, useTextField } from "@react-aria/textfield";

function TextField(props: AriaTextFieldOptions) {
  let ref = useRef<HTMLInputElement>(null);
  let { inputProps } = useTextField(props, ref);

  return (
    <>
      <input {...(inputProps as InputHTMLAttributes<HTMLInputElement>)} ref={ref} />
    </>
  );
}