Fix bug rendering tabs inside a component which uses a svelte transition

This commit is contained in:
Andrew Kingston 2021-10-11 11:34:19 +01:00
parent 72ea464cda
commit 98ca5da073
1 changed files with 12 additions and 4 deletions

View File

@ -8,11 +8,19 @@
const selected = getContext("tab") const selected = getContext("tab")
let tab let tab
let tabInfo let tabInfo
const setTabInfo = () => { const setTabInfo = () => {
tabInfo = tab.getBoundingClientRect() // If the tabs are being rendered inside a component which uses
if ($selected.title === title) { // a svelte transition to enter, then this initial getBoundingClientRect
$selected.info = tabInfo // will return an incorrect position.
} // We just need to get this off the main thread to fix this, by using
// a 0ms timeout.
setTimeout(() => {
tabInfo = tab.getBoundingClientRect()
if ($selected.title === title) {
$selected.info = tabInfo
}
}, 0)
} }
onMount(() => { onMount(() => {