Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

206
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda