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

Don't set children attribute on SVG nodes #6164

Merged
merged 1 commit into from
Mar 2, 2016
Merged

Don't set children attribute on SVG nodes #6164

merged 1 commit into from
Mar 2, 2016

Conversation

gaearon
Copy link
Collaborator

@gaearon gaearon commented Mar 2, 2016

This fixes a bug introduced in #5714.
Closes #6165 (yes, an issue from the future, I know!)

The code paths are now similar to web components where we work around the same issue (#5093).

Reviewers: @spicyj

@@ -912,20 +914,21 @@ ReactDOMComponent.Mixin = {
deleteListener(this, propKey);
}
} else if (isCustomComponent(this._tag, nextProps)) {
if (propKey === CHILDREN) {
nextProp = null;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was not sure what is the point of setting nextProp to null here. It caused removeAttribute() call but it’s not like this attribute existed in the first place? Since this didn’t break any tests (:wink::wink:), I just put it behind an if.

@gaearon
Copy link
Collaborator Author

gaearon commented Mar 2, 2016

This is similar to #5093 so I would appreciate if @jimfb, @zpao and @sebmarkbage could also take a look. I can remove the change to web component code and keep it as if (propKey === CHILDREN) nextProp = null if necessary and adjust SVG path accordingly but I’d love to understand the rationale.

@sophiebits
Copy link
Collaborator

We probably also want to skip dangerouslySetInnerHTML. Maybe suppressContentEditableWarning too now that we invented that…

@sophiebits
Copy link
Collaborator

Maybe just add a list/object at the top with those keys to skip over? Otherwise this seems good.

@gaearon
Copy link
Collaborator Author

gaearon commented Mar 2, 2016

@spicyj I added an object.

).toBe(false);
});

it('should skip dangerouslySetInnerHTML on web components', function() {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Made this a separate test because can’t check children and dangerouslySetInnerHTML at the same time.

@facebook-github-bot
Copy link

@gaearon updated the pull request.

1 similar comment
@facebook-github-bot
Copy link

@gaearon updated the pull request.

var STYLE = keyOf({style: null});
var HTML = keyOf({__html: null});
var RESERVED_PROPS = keyMirror({
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for keyMirror since we're not using the values.

@sophiebits
Copy link
Collaborator

(Otherwise looks great.)

This fixes a bug introduced in #5714.
The code paths are now similar to web components where we worked around the same issue in #5093.

Additionally, we also skip dangerouslySetInnerHTML and suppressContentEditableWarning.
@facebook-github-bot
Copy link

@gaearon updated the pull request.

gaearon added a commit that referenced this pull request Mar 2, 2016
Don't set children attribute on SVG nodes
@gaearon gaearon merged commit 4bbd8d2 into facebook:master Mar 2, 2016
@gaearon gaearon deleted the fix-svg branch March 2, 2016 11:02
zpao added a commit to zpao/react that referenced this pull request Mar 9, 2016
This reverts commit 4bbd8d2, reversing
changes made to 56c423a.
zpao added a commit to zpao/react that referenced this pull request Mar 11, 2016
This reverts commit 4bbd8d2, reversing
changes made to 56c423a.
if (propKey === CHILDREN) {
nextProp = null;
if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
DOMPropertyOperations.setValueForAttribute(
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gaearon this implementation doesn't allow to pass values other than strings to a custom element. How do I pass an array, object or function?

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

Successfully merging this pull request may close these issues.

SVG renders children="[Object object]" into DOM
4 participants