Skip to content

Commit 6052c9a

Browse files
committed
Allow hydrating empty string as null.
1 parent 3012d8b commit 6052c9a

File tree

2 files changed

+18
-11
lines changed

2 files changed

+18
-11
lines changed

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1139,7 +1139,9 @@ export function canHydrateInstance(
11391139
} else if (
11401140
rel !== anyProps.rel ||
11411141
element.getAttribute('href') !==
1142-
(anyProps.href == null ? null : anyProps.href) ||
1142+
(anyProps.href == null || anyProps.href === ''
1143+
? null
1144+
: anyProps.href) ||
11431145
element.getAttribute('crossorigin') !==
11441146
(anyProps.crossOrigin == null ? null : anyProps.crossOrigin) ||
11451147
element.getAttribute('title') !==
@@ -2984,7 +2986,7 @@ export function hydrateHoistable(
29842986
const node = nodes[i];
29852987
if (
29862988
node.getAttribute('href') !==
2987-
(props.href == null ? null : props.href) ||
2989+
(props.href == null || props.href === '' ? null : props.href) ||
29882990
node.getAttribute('rel') !==
29892991
(props.rel == null ? null : props.rel) ||
29902992
node.getAttribute('title') !==

packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js

+14-9
Original file line numberDiff line numberDiff line change
@@ -62,18 +62,23 @@ describe('ReactDOMServerIntegration', () => {
6262
expect(e.getAttribute('href')).toBe('');
6363
});
6464

65-
itRenders('empty href on other tags', async render => {
65+
itRenders('empty href on base tags as null', async render => {
66+
const e = await render(<base href="" />, 1);
67+
expect(e.getAttribute('href')).toBe(null);
68+
});
69+
70+
itRenders('empty href on area tags as null', async render => {
6671
const e = await render(
67-
// <link href="" /> would be more sensible.
68-
// However, that results in a hydration warning as well.
69-
// Our test helpers do not support different error counts for initial
70-
// server render and hydration.
71-
// The number of errors on the server need to be equal to the number of
72-
// errors during hydration.
73-
// So we use a <div> instead.
74-
<div href="" />,
72+
<map>
73+
<area alt="" href="" />
74+
</map>,
7575
1,
7676
);
77+
expect(e.firstChild.getAttribute('href')).toBe(null);
78+
});
79+
80+
itRenders('empty href on link tags as null', async render => {
81+
const e = await render(<link rel="stylesheet" href="" />, 1);
7782
expect(e.getAttribute('href')).toBe(null);
7883
});
7984

0 commit comments

Comments
 (0)