-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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
Invalid value for prop type
on <path> tag
#3310
Comments
@minhTheGreat can you create a codesandbox reproducing the issue? |
See Lines 45 to 58 in 1216e06
|
Going to close this as resolved, please comment back if there is something I'm missing |
oh this is custom curve that implements step curve interpolators d3JS |
Oh that makes sense - this isn't a very well documented use-case Well type definitely isn't valid on path https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path It probably isn't getting filtered out correctly somewhere. I'll check this tomorrow. Thanks! |
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/type Yeah.. basically because props are just blindly spread onto the element and None of the actual elements |
@minhTheGreat #3327 |
…lementPropKeys (#3327) <!--- Provide a general summary of your changes in the Title above --> ## Description <!--- Describe your changes in detail --> Recharts has a `filterProps` function which was intended to filter out all properties that are not valid SVGProps or events that need passed down to children. Multiple times we have come across issues where Recharts defined props such as `type` (in the past `points`) overlap with traditional SVGProps (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) In these cases props get spread onto SVG elements that aren't intended or valid. In this case the `type` prop [is a valid SVG attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/type). This never caused error in the past because the DOM will ignore attributes that are strings or numbers, but when adding a line or area `type` property that is custom `CurveFactory` from d3 such as ``` const stepAround = curveCardinal.tension(0.5); ``` the DOM will throw an error "Invalid value for prop type on <path> tag" because functions are not valid on HTML elements in the DOM. - remove `type` from valid `SVGElementAttributes` - we do not use any elements that need it - add an `isFunction` check within `filterProps` for attributes that are supposed to be one of `SVGElementAttributes` - these should never be functions - detail comment within `filterProps` - adds an example using a `CurveFactory` in AreaChart demo ## Related Issue <!--- This project only accepts pull requests related to open issues --> <!--- If suggesting a new feature or change, please discuss it in an issue first --> <!--- If fixing a bug, there should be an issue describing it with steps to reproduce --> <!--- Please link to the issue here: --> #3310 ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> Resolve above described error. Prevent more errors with `type` in the future. ## How Has This Been Tested? <!--- Please describe in detail how you tested your changes. --> <!--- Include details of your testing environment, and the tests you ran to --> <!--- see how your change affects other areas of the code, etc. --> The true `type` SVG attribute can only be used with the following tags: ![image](https://user-images.githubusercontent.com/25180830/216709142-dc93d508-de1b-43c6-a1be-0afeb3467a7a.png) None of which we use in Recharts. - In demo slightly modify an example to use a `CurveFactory` - ensure the new curve factory type is displayed correctly and that the error is not thrown. - `type` is passed down explicitly by the chart so it is okay that it gets filtered out in `filterProps` - check functionality of other chart types and `CurveType` values such as `monotone` and `linear` ## Screenshots (if appropriate): ![image](https://user-images.githubusercontent.com/25180830/216709982-a73e2436-2f2f-4332-a9dc-d6d4deb808fd.png) ^ No error thrown like in issue but curve still reflects the given `CurveFactory` ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [x] My code follows the code style of this project. - [ ] My change requires a change to the documentation. - [ ] I have updated the documentation accordingly. - [ ] I have added tests to cover my changes. - [x] All new and existing tests passed. --------- Co-authored-by: Coltin Kifer <ckifer@amazon.com> Co-authored-by: JM <proke03@naver.com>
Merged in #3327 Resolving this, will be released in next minor version |
Should be fixed in 2.4.0 |
I got an issue when I set the type of lineChart is stepAround, it shows a warning
![Screenshot_2](https://user-images.githubusercontent.com/45730043/216309068-440a9b30-566a-45ad-a193-b0ed81b9edc0.png)
How can i fix it ?
The text was updated successfully, but these errors were encountered: