jsx-eslint/eslint-plugin-react
View on GitHubreact/prop-types & TypeScript: false positive with HTMLAttributes prop type
Open
#3325 opened on Jul 8, 2022
bughelp wantedtypescript
Description
Using React.HTMLAttributes<HTMLButtonElement> as the prop type in a component definition causes false positives of react/prop-types.
Strangely enough, when adding indirection by extending that same type in an interface, the problem goes away. The same technique applied to a type alias for the same type does not work, however.
Even stranger, the last case in the minimal working example below shows a case where prop type T gives the false positive while T & T does not.
Version: eslint-plugin-react@7.30.1
Minimal working example:
import React from "react";
// ERROR: 'className' is missing in props validation react/prop-types
const MyComponent = ({ className }: React.HTMLAttributes<HTMLButtonElement>) => null;
// ERROR: 'className' is missing in props validation react/prop-types
type TypeAlias = React.HTMLAttributes<HTMLButtonElement>;
const MyComponent_Alias = ({ className }: TypeAlias) => null;
// ERROR: 'className' is missing in props validation react/prop-types
interface ExtendedTypeAlias extends TypeAlias {}
const MyComponent_ExtendedAlias = ({ className }: ExtendedTypeAlias) => null;
// OK
interface ExtendedInterface extends React.HTMLAttributes<HTMLButtonElement> {}
const MyComponent_ExtendedInterface = ({ className }: ExtendedInterface) => null;
// OK !?
const MyComponent_AliasSelfIntersection = ({ className }: TypeAlias & TypeAlias) => null;