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.

Sign up for GitHub

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

Jump to bottom

Invalid value for prop type on <path> tag #3310

Closed
minhtq97 opened this issue Feb 2, 2023 · 9 comments
Closed

Invalid value for prop type on <path> tag #3310

minhtq97 opened this issue Feb 2, 2023 · 9 comments
Assignees
@ckifer
Labels
bug General bug label

Comments

@minhtq97
Copy link

minhtq97 commented Feb 2, 2023

I got an issue when I set the type of lineChart is stepAround, it shows a warning
Screenshot_2
How can i fix it ?
@ckifer
Copy link
Member

ckifer commented Feb 2, 2023

@minhTheGreat can you create a codesandbox reproducing the issue?

@ckifer ckifer added the bug General bug label label Feb 2, 2023
@ckifer
Copy link
Member

ckifer commented Feb 2, 2023

stepAround is not a valid option for type.

See

recharts/src/shape/Curve.tsx

Lines 45 to 58 in 1216e06

export type CurveType =
| 'basis'
| 'basisClosed'
| 'basisOpen'
| 'linear'
| 'linearClosed'
| 'natural'
| 'monotoneX'
| 'monotoneY'
| 'monotone'
| 'step'
| 'stepBefore'
| 'stepAfter'
| CurveFactory;

@ckifer ckifer added needs reproduction Use this label when an issue is submitted without proper reproduction and removed bug General bug label labels Feb 2, 2023
@ckifer
Copy link
Member

ckifer commented Feb 2, 2023

Going to close this as resolved, please comment back if there is something I'm missing

@ckifer ckifer closed this as completed Feb 2, 2023
@minhtq97
Copy link
Author

minhtq97 commented Feb 3, 2023 •
edited
Loading

oh this is custom curve that implements step curve interpolators d3JS
it shows a warning like this
https://codesandbox.io/s/flamboyant-swartz-rspdz7?file=/src/App.js

@ckifer
Copy link
Member

ckifer commented Feb 3, 2023 •
edited
Loading

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!

@ckifer ckifer added bug General bug label and removed needs reproduction Use this label when an issue is submitted without proper reproduction labels Feb 3, 2023
@ckifer ckifer reopened this Feb 3, 2023
@ckifer
Copy link
Member

ckifer commented Feb 3, 2023

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/type

Yeah.. basically because props are just blindly spread onto the element and type happens to be a valid SVG property it doesn't get filtered out like it should. This is fine when the type is a string or a number cause the DOM ignores it - not fine when its a function.

None of the actual elements type is valid for are used in the project. Going to add a check for a function and remove that prop from allowed attributes

@ckifer ckifer mentioned this issue Feb 3, 2023
Merged
8 tasks
@ckifer
Copy link
Member

ckifer commented Feb 3, 2023

@minhTheGreat #3327

ckifer added a commit that referenced this issue Feb 6, 2023
@ckifer @proke03
fix: filter out functions in filterProps, remove type from valid SVGE…
d8ea0c8 
…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>
@ckifer ckifer self-assigned this Feb 6, 2023
@ckifer
Copy link
Member

ckifer commented Feb 6, 2023

Merged in #3327

Resolving this, will be released in next minor version

@ckifer ckifer closed this as completed Feb 6, 2023
@ckifer
Copy link
Member

ckifer commented Feb 9, 2023

Should be fixed in 2.4.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ckifer ckifer

Labels
bug General bug label
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ckifer @minhtq97