fix(runtime): set Static yoga node to display:none in dynamic layout

Static content is rendered via paintIsolated (separate channel), but its
yoga node was still participating in the dynamic frame layout calculation,
adding blank lines equal to the Static content height between the last
Static item and the dynamic content below.

Setting display:none on the Static yoga node removes it from the dynamic
layout. paintIsolated is unaffected — it reparents children into a
temporary yoga tree.
This commit is contained in:
Yunfei He
2026-05-24 23:16:58 +08:00
parent 15cf216291
commit ddac248d26
2 changed files with 30 additions and 0 deletions
@@ -130,3 +130,28 @@ test("Static flush clears the dynamic frame first (non-debug mode)", async () =>
app.unmount();
});
test("Static items do not add blank lines to the dynamic frame", async () => {
const items = ref<string[]>([]);
const App = defineComponent(() => () => (
<Box flexDirection="column">
<Static items={items.value}>
{{
default: ({ item }: { item: string }) => <Text>{item}</Text>,
}}
</Static>
<Text>[live]</Text>
</Box>
));
const { lastFrame } = await render(App);
expect(lastFrame()).toBe("[live]");
items.value = ["a", "b", "c"];
await nextTick();
// The dynamic frame should ONLY contain [live], no blank lines from Static
const frame = lastFrame()!;
expect(frame).toBe("[live]");
});