Typescript "'className' is missing in props validation" despite being defined

[awwong1]

Description

I am observing 'className' is missing in props validation despite it being correctly specified in the type definition.

• React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
• https://github.com/DefinitelyTyped/DefinitelyTyped/blob/90f13b6b5e4ee2db30044f960327e17ed3ef3338/types/react/index.d.ts#L1854
  • React.HTMLAttributes<HTMLInputElement>.className?: string | undefined

Versions

    "@types/react": "^18.0.0",
    "eslint": "^8.8.0",
    "eslint-plugin-react": "^7.28.0",
    "react": "^18.0.0",
    "typescript": "^4.5.5"

Example

import React from 'react'

const classNames = (...classes: (false | null | undefined | string)[]) =>
  classes.filter(Boolean).join(' ')


export const Input = (
  props: React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  >
) => (
  <input
    {...props}
    className={classNames(
      'class-a',
      'class-b',
      // eslint-disable-next-line react/prop-types
      props.className
    )}
  />
)

Expected behaviour

The eslint-disable-next-line should not be necessary.
I can also workaround this by adding in & { className?: string } into the type definition of props.

  props: React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > & { className?: string }

[ljharb]

Seems like React.DetailedHTMLProps is a thing we don't have any knowledge of, and we'd have to hardcode support for (probably React.InputHTMLAttributes as well).

[lokve]

I have the same problem

type TDelIconProps = React.HTMLProps<HTMLDivElement>;

const DelIcon: React.FC<TDelIconProps> = ({className, ...rest}) => (
    <div className={classNames('del flex-center', className)} {...rest}>
        <i className="iconfont icon-del f12" />
    </div>
);

ESLint: 'className' is missing in props validation(react/prop-types)

Versions

eslint:7.32.0
eslint-plugin-react:7.30.0

[DerPipo]

It seems weird to me, but this workaround, using an interface and extending DetailedHTMLAttributes, seems to work:

interface InputProps  extends React.DetailedHTMLProps<
  React.InputHTMLAttributes<HTMLInputElement>,  
  HTMLInputElement
> {}

export const Input = (
  props: InputProps
) => (
  // your code
);

[rwb196884]

Still broken in 7.33.2

[ljharb]

@rwb196884 its not broken, it’s just not something we support yet.

[divmgl]

If you import directly from React the error message goes away.

Works:

import type { HTMLAttributes } from "react"
import { cn } from "../../lib/utils"

export function Heading({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("font-semibold text-lg", className)} {...props} />
}

Does not work:

import React from "react"
import { cn } from "../../lib/utils"

export function Heading({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("font-semibold text-lg", className)} {...props} />
}

[fernandocanizo]

@divmgl I found the same issue and workaround but I'm completely puzzled about why does that behave that way. Isn't it supposed to import the exact same thing? If you (or anyone) know/s the reason this import behaves like this, I'd like to learn why. Cause right now, seeing this, to me Javascript became broken.

What I'm missing? Do they import different things just because the same thing is imported in different ways?

To be completely clear, I'm referring to this:

import type { HTMLAttributes } from "react"
// ...
export function Heading({ className, ...props }: HTMLAttributes<HTMLDivElement>) {

versus this:

import React from "react"
// ...
export function Heading({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {

[divmgl]

I agree that this is a bug; I merely posted the workaround.

[sayjeyhi]

I have this issue with shadci generated components , like here:

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
      className,
    )}
    {...props}
  />
));

gives: ESLint: 'className' is missing in props validation(react/prop-types)

[KirillTregubov]

Still happens with Alert Dialog on the latest version (7.34.4).

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => ( // 'className' is missing in props validation eslint[react/prop-types]
  <AlertDialogPrimitive.Overlay
    {...props}
    ref={ref}
  />
))

[ljharb]

@KirillTregubov if AlertDialogPrimitive isn't defined in that file, then there's no practical way for eslint to know that className is defined in it.