I am getting this error:
Type '{ placeholder: string | undefined; autoComplete: string | undefined; "data-testid": string | undefined; onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined; ... 282 more ...; css?: InterpolationWithTheme<...>; } | { ...; } | { ...; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
Type '{ placeholder: string | undefined; autoComplete: string | undefined; "data-testid": string | undefined; onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined; ... 282 more ...; css?: InterpolationWithTheme<...>; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
Type '{ placeholder: string | undefined; autoComplete: string | undefined; "data-testid": string | undefined; onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined; ... 282 more ...; css?: InterpolationWithTheme<...>; }' is not assignable to type 'ClassAttributes<HTMLInputElement>'.
Types of property 'ref' are incompatible.
Type '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
Type 'RefObject<HTMLDivElement>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
Type 'RefObject<HTMLDivElement>' is not assignable to type 'RefObject<HTMLInputElement>'.
Type 'HTMLDivElement' is missing the following properties from type 'HTMLInputElement': accept, alt, autocomplete, capture, and 51 more.ts(2322)
In this code:
import _ from 'lodash'
import { TextFieldProps } from '@mui/material/TextField/TextField'
...
_renderSimple (sharedProps: TextFieldProps): JSX.Element {
const inputProps = _.omit(sharedProps, ['className', 'hintText', 'InputProps'])
return (
<div className={sharedProps.className}>
<input
{...inputProps}
placeholder={sharedProps.placeholder}
autoComplete={this.props.autoComplete}
data-testid={this.props.dataTestId}
/>
{this._renderError()}
</div>
)
}
which in my opinion makes no sense, since I’m putting the inputProps
in input
, not in div
. What am I missing?