Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

202
Vistas
Type 'RefObject<HTMLDivElement>' is not assignable to type 'RefObject<HTMLInputElement>'

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?

about 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

The types are not the same, you are trying to use a material-ui type on a vanilla input.

The standard input 'React.DetailedHTMLProps<React.InputHTMLAttributes, HTMLInputElement>' and the material-ui TextFieldProps are separate type definitions.

You can force it by doing the following, but be warned you could have un-intended side effects

const inputProps = _.omit(sharedProps, ['className', 'hintText', 'InputProps']) as unknown as React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda