[Fix] propTypes: handle imported types/interface in forwardRef generic

Fixes #3140
jsx-eslint · Apr 30, 2022 · 6c88912 · 6c88912
1 parent b7a9c2a
commit 6c88912
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * `propTypes`: add `VFC` to react generic type param map ([#3230][] @dlech)
 * [`no-unused-state`]: avoid a crash ([#3258][] @WillyLiaoWH @ljharb)
 * [`jsx-no-useless-fragment`]: use proper apostrophe in error message ([#3266][] @develohpanda)
+* `propTypes`: handle imported types/interface in forwardRef generic ([#3280][] @vedadeepta)
 
 ### Changed
 * [readme] remove global usage and eslint version from readme ([#3254][] @aladdin-add)
@@ -31,6 +32,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Refactor] add `isParenthesized` AST util ([#3203][] @Belco90)
 * [Docs] `default-props-match-prop-types`, `require-default-props`, `sort-prop-types`: fix typos ([#3279][] @nix6839)
 
+[#3280]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3280
 [#3279]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3279
 [#3273]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3273
 [#3272]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3272

diff --git a/lib/util/propTypes.js b/lib/util/propTypes.js
@@ -1016,7 +1016,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
       const obj = new DeclarePropTypesForTSTypeAnnotation(propTypes, declaredPropTypes);
       components.set(node, {
         declaredPropTypes: obj.declaredPropTypes,
-        ignorePropsValidation: false,
+        ignorePropsValidation: obj.shouldIgnorePropTypes,
       });
       return;
     }

diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
@@ -4042,6 +4042,102 @@ ruleTester.run('prop-types', rule, {
           }}
         />
       `,
+    },
+    {
+      code: `
+        import React, { forwardRef } from 'react';
+        import { ControlProps, NamedProps } from './ext';
+
+        type ButtonProps = ControlProps & NamedProps & {
+          onClick?: (() => void) | undefined;
+          onMouseDown?: (() => void) | undefined;
+          onMouseUp?: (() => void) | undefined;
+          disabled?: boolean | undefined;
+          width?: number;
+          type?: 'submit' | 'reset' | 'button' | undefined;
+        };
+
+        const BaseButton = forwardRef<HTMLButtonElement, ButtonProps>((
+          {
+            name,
+            className,
+            onClick,
+            onMouseDown,
+            onMouseUp,
+            children,
+            disabled,
+            width,
+            type,
+          },
+          ref,
+        ): JSX.Element => {
+          return <span>{width}</span>;
+        });
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import React, { forwardRef } from 'react';
+        import { ControlProps, NamedProps } from './ext';
+
+        interface ButtonProps extends NamedProps {
+          onClick?: (() => void) | undefined;
+          onMouseDown?: (() => void) | undefined;
+          onMouseUp?: (() => void) | undefined;
+          disabled?: boolean | undefined;
+          width?: number;
+          type?: 'submit' | 'reset' | 'button' | undefined;
+        };
+
+        const BaseButton = forwardRef<HTMLButtonElement, ButtonProps>((
+          {
+            name,
+            className,
+            onClick,
+            onMouseDown,
+            onMouseUp,
+            children,
+            disabled,
+            width,
+            type,
+          },
+          ref,
+        ): JSX.Element => {
+          return <span>{width}</span>;
+        });
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import React, { forwardRef } from 'react';
+        import { IExt1 } from './ext';
+
+        interface IProps extends IExt1 {
+          onClick?: (() => void) | undefined;
+          onMouseDown?: (() => void) | undefined;
+          onMouseUp?: (() => void) | undefined;
+          disabled?: boolean | undefined;
+          width?: number;
+          type?: 'submit' | 'reset' | 'button' | undefined;
+        };
+
+        const Button: React.FC<IProps> = ({
+          name,
+          className,
+          onClick,
+          onMouseDown,
+          onMouseUp,
+          children,
+          disabled,
+          width,
+          type,
+        }): JSX.Element => {
+          return <span>{width}</span>;
+        };
+      `,
+      features: ['ts', 'no-babel'],
     }
   )),