public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Fix active tab selection on mount

Browse Source 
When this runs, $api.tabs has not been updated yet, so the calculation was not correct.
This caused various bugs like defaultIndex not working and aria-selected not being set, etc.
This commit is contained in:
Ryan Gossiaux
2021-12-29 10:29:26 -10:00
parent 70c68d00fe
commit 9772e49054
1 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/lib/components/tabs/TabGroup.svelte
View File

@@ -104,34 +104,38 @@
});
onMount(() => {
if ($api.tabs.length <= 0) return;
if (tabs.length <= 0) return;
if (selectedIndex !== null) return;
let tabs = $api.tabs.filter(Boolean) as HTMLElement[];
let focusableTabs = tabs.filter((tab) => !tab.hasAttribute("disabled"));
let mountedTabs = tabs.filter(Boolean) as HTMLElement[];
let focusableTabs = mountedTabs.filter(
(tab) => !tab.hasAttribute("disabled")
);
if (focusableTabs.length <= 0) return;
// Underflow
if (defaultIndex < 0) {
selectedIndex = tabs.indexOf(focusableTabs[0]);
selectedIndex = mountedTabs.indexOf(focusableTabs[0]);
}
// Overflow
else if (defaultIndex > $api.tabs.length) {
selectedIndex = tabs.indexOf(focusableTabs[focusableTabs.length - 1]);
else if (defaultIndex > mountedTabs.length) {
selectedIndex = mountedTabs.indexOf(
focusableTabs[focusableTabs.length - 1]
);
}
// Middle
else {
let before = tabs.slice(0, defaultIndex);
let after = tabs.slice(defaultIndex);
let before = mountedTabs.slice(0, defaultIndex);
let after = mountedTabs.slice(defaultIndex);
let next = [...after, ...before].find((tab) =>
focusableTabs.includes(tab)
);
if (!next) return;
selectedIndex = tabs.indexOf(next);
selectedIndex = mountedTabs.indexOf(next);
}
});