diff --git a/compat/test/browser/suspense-hydration.test.js b/compat/test/browser/suspense-hydration.test.js
index 9143903238..b1ed754ba1 100644
--- a/compat/test/browser/suspense-hydration.test.js
+++ b/compat/test/browser/suspense-hydration.test.js
@@ -139,6 +139,36 @@ describe('suspense hydration', () => {
});
});
+ it('Should hydrate a fragment with multiple children correctly', () => {
+ scratch.innerHTML = '
Hello
World!
';
+ clearLog();
+
+ const [Lazy, resolve] = createLazy();
+ hydrate(
+
+
+ ,
+ scratch
+ );
+ rerender(); // Flush rerender queue to mimic what preact will really do
+ expect(scratch.innerHTML).to.equal('Hello
World!
');
+ expect(getLog()).to.deep.equal([]);
+ clearLog();
+
+ return resolve(() => (
+ <>
+ Hello
+ World!
+ >
+ )).then(() => {
+ rerender();
+ expect(scratch.innerHTML).to.equal('Hello
World!
');
+ expect(getLog()).to.deep.equal([]);
+
+ clearLog();
+ });
+ });
+
it('should allow siblings to update around suspense boundary', () => {
scratch.innerHTML = 'Count: 0
Hello
';
clearLog();
diff --git a/src/diff/index.js b/src/diff/index.js
index 3e4b17bd62..35a9b7c6d2 100644
--- a/src/diff/index.js
+++ b/src/diff/index.js
@@ -53,7 +53,7 @@ export function diff(
if (oldVNode._flags & MODE_SUSPENDED) {
isHydrating = !!(oldVNode._flags & MODE_HYDRATE);
oldDom = newVNode._dom = oldVNode._dom;
- excessDomChildren = [oldDom];
+ excessDomChildren = oldVNode._excess;
}
if ((tmp = options._diff)) tmp(newVNode);
@@ -277,6 +277,7 @@ export function diff(
newVNode._flags |= isHydrating
? MODE_HYDRATE | MODE_SUSPENDED
: MODE_HYDRATE;
+ newVNode._excess = [...excessDomChildren];
excessDomChildren[excessDomChildren.indexOf(oldDom)] = null;
// ^ could possibly be simplified to:
// excessDomChildren.length = 0;