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

Input with type checkbox does flags checked attribute as unknown property in v7.31.3 #3383

Closed
MikeBeas opened this issue Sep 3, 2022 · 5 comments

Comments

@MikeBeas
Copy link

MikeBeas commented Sep 3, 2022

Following up on #3380, I've just installed v7.31.3, but I'm still seeing an issue where the checked attribute for a checkbox input is being flagged as unknown.

<input
  type="checkbox"
  checked={checked}
  disabled={disabled}
  id={id}
  onChange={onChange}
/>

error Unknown property 'checked' found react/no-unknown-property

I'm also seeing this issue when using custom properties (such as body-scroll-lock-ignore used by body-scroll-lock, for example), so I'll likely end up having to disable this rule altogether unfortunately. Until the most recent release it never had an issue with these attributes and since body-scroll-lock-ignore is not a standard attribute I'm assuming it's not likely to be added to the whitelist for this plugin.

However, checked definitely seems like a bug so I figured I would report it.

@MikeBeas MikeBeas changed the title Input with type checkbox does flags checked attribute as unknown property Input with type checkbox does flags checked attribute as unknown property in v7.31.3 Sep 3, 2022
@ljharb
Copy link
Member

ljharb commented Sep 3, 2022

Thanks, i'll definitely fix checked ASAP.

Custom HTML element attributes that don't start with data- have always been invalid in browsers, but i'm not seeing examples of that in the package's readme. What exactly is it warning on?

@ljharb ljharb closed this as completed in 6128f9a Sep 3, 2022
@ljharb
Copy link
Member

ljharb commented Sep 3, 2022

v7.31.4 will be out once all the tests pass from 6128f9a.

@MikeBeas
Copy link
Author

MikeBeas commented Sep 3, 2022

The body-scroll-lock-ignore property was mentioned in these two snippets in the readme on the package, in the examples under "allowTouchMove". It might be that they only used it as an example and I could use a data-* attribute for the same purpose, but I went with what they used assuming that something in the package was keying in on that attribute.

disableBodyScroll(container, {
  allowTouchMove: el => {
    while (el && el !== document.body) {
      if (el.getAttribute('body-scroll-lock-ignore') !== null) {
        return true;
      }

      el = el.parentElement;
    }
  },
});
<div id="container">
  <div id="scrolling-map" body-scroll-lock-ignore>
    ...
  </div>
</div>

v7.31.4 will be out once all the tests pass from 6128f9a.

Awesome, thanks for the extremely quick fix!

@ljharb
Copy link
Member

ljharb commented Sep 3, 2022

gotcha - i'd definitely suggest using a data- prefix, especially if that's the only barrier to using this useful rule :-)

Please file issues if you run into any more issues with standard attributes!

@MikeBeas
Copy link
Author

MikeBeas commented Sep 3, 2022

@ljharb Will do, thanks! I just checked and it looks like there were some issues with the body scroll lock package on iOS and I ended up disabling it in my app, so I'm going to remove that attribute and everything else should be good. The rest of my app has linted successfully.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants