[Bug]: no-unknown-property is missing some valid global properties (event handlers)

[zandermax]

Is there an existing issue for this?

• I have searched the existing issues and my issue is unique
• My issue appears in the command-line and not only in the text editor

Description Overview

Brief description

Several global event handler properties that are valid on all HTML elements are being limited to only a few by this rule.

See the "event handler" section in the MDN documentation on global attributes, and the HTML specification on global event handlers here.

Show example of your code (as text format), add images/videos/gifs to help explain example
and/or Link of repo to where issue is occurring

<svg>
  <image onLoad={() => console.log("Loaded!")} />
</svg>

What is happening? / What is the error?

In the above example, the error is "Invalid property 'onLoad' found on tag 'image', but it is only allowed on: script img, link, picture, iframe, object".

What command(s) did you run to reproduce issue?

Enabled the rule and the above code will show an error.

Expected Behavior

Brief description

Any global event handler should be able to be defined for any HTML element. (Note that most of these are already in @types/react).

Show example of code (as text format), add images/videos/gifs to help explain expected behavior

This code should not show an error for defining onLoad:

<svg>
  <image onLoad={() => console.log("Loaded!")} />
</svg>

eslint-plugin-react version

7.31.11

eslint version

8.28.0

node version

16.14.2

[zandermax]

I will submit a PR for this. Should I be assigned ?

[ljharb]

No need for assignment.

the tag, however, is <img>, i thought. is <image> valid in svg?

[zandermax]

Yeah it is a synonym in SVG (see here). Though that is just an example from my use case where I load an image and perform actions after the load event fires on the <image>. Regardless, onLoad (and many others not in the example) should be valid on any HTML element according to the spec.

[ljharb]

That doesn't sound accurate; div, for example, doesn't load anything and thus shouldn't have an onLoad or onError etc.

[ljharb]

Note that the PR will need to make sure that image is only considered inside SVG, and not outside in HTML, where it's an invalid element.