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

Bento: React warnings about incorrect DOM attributes / unrecognized props #35553

Closed
swissspidy opened this issue Aug 6, 2021 · 5 comments
Closed
Assignees
Labels
Stale Inactive for one year or more Type: Bug WG: bento

Comments

@swissspidy
Copy link
Contributor

Description

Invalid DOM property

When using a Bento component such as amp-base-carousel in React development mode, React will emit lots of console warnings about invalid DOM properties.

The reason for this is the difference between Preact and React in how they treat HTML attribute/property names.

Example: while Preact allows you to write <div class="foo" /> and <path stroke-width="1px" />, React requires <div className="foo" /> and <path strokeWidth="1px" />.

Solution: when creating the React version of a component, such props need to be renamed.

Unrecognized DOM property

The Arrow component in amp-base-carousel uses the outsetArrows prop to determine which class name to use and passes it down to the passed Comp component (defaulting to DefaultArrow).

Due to blindly passing this prop and using {...rest} in DefaultArrow, this prop ends up in the DOM, so React complains about it being unrecognized.

outsetArrows={outsetArrows}

Solution: don't leak these to the DOM

Receiving false for non-boolean attributes

React expects passing rtl="false" / rtl="true" instead of rtl={false} / rtl={true}, or simply rtl={rtl || undefined}. Otherwise you will get Received false for a non-boolean attribute warnings, as you can see in the log below.

Props @westonruter for initially reporting this at swissspidy/gutenberg-bento#4

Reproduction Steps

  1. Use the BaseCarousel React component in development mode
  2. See lots of browser console warnings

Relevant Logs

* Warning: Invalid DOM property `stroke-width`. Did you mean `strokeWidth`?
* Warning: Invalid DOM property `stroke-linejoin`. Did you mean `strokeLinejoin`?
* Warning: Invalid DOM property `stroke-linecap`. Did you mean `strokeLinecap`?
* Warning: React does not recognize the `outsetArrows` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `outsetarrows` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
* Warning: Received `false` for a non-boolean attribute `rtl`. If you want to write it to the DOM, pass a string instead: `rtl="false"` or `rtl={value.toString()}`. If you used to conditionally omit it with `rtl={condition && value}`, pass `rtl={condition ? value : undefined}` instead.
* Warning: Invalid DOM property `class`. Did you mean `className`?
* Warning: Received `false` for a non-boolean attribute `group`. If you want to write it to the DOM, pass a string instead: `group="false"` or `group={value.toString()}`. If you used to conditionally omit it with `group={condition && value}`, pass `group={condition ? value : undefined}` instead.
* Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2107240354000

@westonruter
Copy link
Member

cc @caroqliu

@westonruter
Copy link
Member

React expects passing rtl="false" / rtl="true" instead of rtl={false} / rtl={true}, or simply rtl={rtl || undefined}. Otherwise you will get Received false for a non-boolean attribute warnings, as you can see in the log below.

Possibly related to the loop attribute: swissspidy/gutenberg-bento#1 and #35555.

@caroqliu
Copy link
Contributor

caroqliu commented Sep 23, 2021

outsetArrows, tabIndex, and rtl issues have been resolved. All that remain for warnings for BentoBaseCarousel in react mode are the svg elements and className, which require the build step described in #35678.

@caroqliu
Copy link
Contributor

caroqliu commented Sep 23, 2021

Checking other react packages for non svg-related, className, dateTime, srcSet, frameBorder, or allowFullScreen warnings:

  • BentoAccordion Screen Shot 2021-09-23 at 10 29 47 AM
  • BentoDateCountdown
  • BentoEmbedlyCard Screen Shot 2021-09-23 at 10 34 17 AM
  • BentoFacebook
    Screen Shot 2021-09-23 at 10 39 32 AM
  • BentoFitText
  • BentoInlineGallery
    Screen Shot 2021-09-23 at 10 45 22 AM
  • BentoInstagram
    Screen Shot 2021-09-23 at 10 54 54 AM
  • BentoLightbox
  • BentoSelector Screen Shot 2021-09-23 at 11 01 24 AM
  • BentoSidebar
  • BentoSocialShare
  • BentoSoundcloud
    Screen Shot 2021-09-23 at 11 06 22 AM
  • BentoStreamGallery
  • BentoTwitter
    Screen Shot 2021-09-23 at 11 08 42 AM
  • BentoVideo
    Screen Shot 2021-09-23 at 11 10 09 AM
  • BentoVideoIframe
  • BentoVimeo
  • BentoWordpressEmbed
    Screen Shot 2021-09-23 at 11 14 43 AM
  • BentoYoutube

@stale
Copy link

stale bot commented Sep 21, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

@stale stale bot added the Stale Inactive for one year or more label Sep 21, 2022
@swissspidy swissspidy closed this as not planned Won't fix, can't repro, duplicate, stale Jan 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Stale Inactive for one year or more Type: Bug WG: bento
Projects
None yet
Development

No branches or pull requests

3 participants