Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion packages/react-dom-bindings/src/shared/DOMProperty.js
Original file line number Diff line number Diff line change
Expand Up @@ -636,7 +636,19 @@ properties[xlinkHref] = new PropertyInfoRecord(
false, // removeEmptyString
);

['src', 'href', 'action', 'formAction'].forEach(attributeName => {
const formAction = 'formAction';
// $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions
properties[formAction] = new PropertyInfoRecord(
'formAction',
STRING,
false, // mustUseProperty
'formaction', // attributeName
null, // attributeNamespace
true, // sanitizeURL
false, // removeEmptyString
);

['src', 'href', 'action'].forEach(attributeName => {
// $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions
properties[attributeName] = new PropertyInfoRecord(
attributeName,
Expand Down
30 changes: 9 additions & 21 deletions packages/react-dom/src/__tests__/ReactDOMComponent-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -533,29 +533,17 @@ describe('ReactDOMComponent', () => {
expect(node.hasAttribute('action')).toBe(false);
});

it('should not add an empty formAction attribute', () => {
it('allows empty string of a formAction to override the default of a parent', () => {
const container = document.createElement('div');
expect(() =>
ReactDOM.render(<button formAction="" />, container),
).toErrorDev(
'An empty string ("") was passed to the formAction attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to formAction instead of an empty string.',
);
const node = container.firstChild;
expect(node.hasAttribute('formAction')).toBe(false);

ReactDOM.render(<button formAction="abc" />, container);
expect(node.hasAttribute('formAction')).toBe(true);

expect(() =>
ReactDOM.render(<button formAction="" />, container),
).toErrorDev(
'An empty string ("") was passed to the formAction attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to formAction instead of an empty string.',
ReactDOM.render(
<form action="hello">
<button formAction="" />,
</form>,
container,
);
expect(node.hasAttribute('formAction')).toBe(false);
const node = container.firstChild.firstChild;
expect(node.hasAttribute('formaction')).toBe(true);
expect(node.getAttribute('formaction')).toBe('');
});

it('should not filter attributes for custom elements', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/shared/ReactFeatureFlags.js
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ export const disableInputAttributeSyncing = false;
// Filter certain DOM attributes (e.g. src, href) if their values are empty
// strings. This prevents e.g. <img src=""> from making an unnecessary HTTP
// request for certain browsers.
export const enableFilterEmptyStringAttributesDOM = false;
export const enableFilterEmptyStringAttributesDOM = __EXPERIMENTAL__;
Copy link
Collaborator

Choose a reason for hiding this comment

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

why do the flag change in this PR?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It was just not on before, where as it probably should've been so we can test this behavior in OSS.


// Changes the behavior for rendering custom elements in both server rendering
// and client rendering, mostly to allow JSX attributes to apply to the custom
Expand Down