jsx-eslint / eslint-plugin-react

React-specific linting rules for ESLint
MIT License
8.97k stars 2.77k forks source link

[Bug]: Unknown property 'popover' found (react/no-unknown-property) #3707

Closed acusti closed 6 months ago

acusti commented 6 months ago

Is there an existing issue for this?

Description Overview

i am using the new popover API and have had to adjust my configuration for the react/no-unknown-property rule like so to avoid lint errors throughout my codebase:

    'react/no-unknown-property': [
        'error',
        { ignore: ['onBeforeToggle', 'onToggle', 'popover', 'popoverTarget', 'popoverTargetAction'] },
    ],

here’s the PR for adding support to react for the API: https://github.com/facebook/react/pull/27981

an example popover:

    <div
        id="foo"
        onBeforeToggle={handleBeforeToggle}
        // @ts-expect-error https://github.com/facebook/react/pull/27480
        popover="auto"
    >
        {…}
    </div>

an example trigger:

    <button
        className="close-btn"
        // @ts-expect-error https://github.com/facebook/react/pull/27480
        popoverTarget="foo"
        popoverTargetAction="hide"
    >
        Close
    </button>

example errors:

  205:17  error  Unknown property 'popover' found              react/no-unknown-property
  211:21  error  Unknown property 'popoverTarget' found        react/no-unknown-property
  212:21  error  Unknown property 'popoverTargetAction' found  react/no-unknown-property

these occur when running my lint npm run script: "lint": "eslint .",

Expected Behavior

i expect the new attributes to not be considered “unknown” properties

eslint-plugin-react version

v7.34.0

eslint version

v8.57.0

node version

v21.6.1