fix: ensure `bind:offsetHeight` updates (#8096)

fixes #4233 by calling the callback after the iframe loads, which may be asynchronous

---------

Co-authored-by: Yuichiro Yamashita <xydybaseball@gmail.com>
pull/8326/head
Jos de Jong 2 years ago committed by GitHub
parent 709264a94c
commit e5b0b6235d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -624,6 +624,10 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
iframe.src = 'about:blank';
iframe.onload = () => {
unsubscribe = listen(iframe.contentWindow, 'resize', fn);
// make sure an initial resize event is fired _after_ the iframe is loaded (which is asynchronous)
// see https://github.com/sveltejs/svelte/issues/4233
fn();
};
}

@ -0,0 +1,6 @@
export default {
async test({ assert, component }) {
assert.equal(component.toggle, true);
assert.equal(component.offsetHeight, 800);
}
};

@ -0,0 +1,18 @@
<script>
export let offsetHeight;
export let offsetWidth;
export let toggle = false;
$: if (offsetWidth) {
toggle = true;
}
</script>
<div class:toggle>
<div bind:offsetHeight bind:offsetWidth>{offsetHeight}</div>
</div>
<style>
.toggle > div {
height: 800px;
}
</style>
Loading…
Cancel
Save