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