Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: no-unknown-property gives false-positives on data-* attributes, but React gives warnings on them #3643

Closed
2 tasks done
HermanBilous opened this issue Oct 17, 2023 · 2 comments · Fixed by #3645
Closed
2 tasks done

Comments

@HermanBilous
Copy link
Contributor

HermanBilous commented Oct 17, 2023

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

There was an #3395 issue raised, which resulted in the rule being updated to support passing data-* attributes with any casing, but even the sandbox the reporter provided included a warning from react: "Warning: React does not recognize the data-testID prop on a DOM element.". This is still an issue right now with react 18, as seen in this sandbox.

https://codesandbox.io/s/adoring-robinson-2z75gh

Expected Behavior

Expected behaviour: data-* attributes are reported, when they have any capital letters.

Actual behaviour: data-* attributes with uppercase letters are not reported by rule, react dumps warnings into console.

eslint-plugin-react version

v7.33.2

eslint version

v8.51.0

node version

v20

@ljharb
Copy link
Member

ljharb commented Oct 19, 2023

OK, so to clarify, even though browsers allow almost anything after data-, react only allows lowercased data attributes?

Changing the sandbox to a few other react versions indicates this warning exists in at least React 16+ (changing it to v15 or lower got annoying, so i gave up).

We'll need to add this as a new option to warn on.

@HermanBilous
Copy link
Contributor Author

Do you think this should hide behind an option to no-unknown-property, so that by default we would ignore data-* uppercase attributes, but could enable the check?

HermanBilous added a commit to HermanBilous/eslint-plugin-react that referenced this issue Oct 20, 2023
HermanBilous added a commit to HermanBilous/eslint-plugin-react that referenced this issue Oct 23, 2023
HermanBilous added a commit to HermanBilous/eslint-plugin-react that referenced this issue Oct 23, 2023
HermanBilous added a commit to HermanBilous/eslint-plugin-react that referenced this issue Oct 23, 2023
HermanBilous added a commit to HermanBilous/eslint-plugin-react that referenced this issue Oct 24, 2023
HermanBilous added a commit to HermanBilous/eslint-plugin-react that referenced this issue Oct 31, 2023
@ljharb ljharb closed this as completed in 70e6019 Nov 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging a pull request may close this issue.

2 participants