js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tab Group - set active tab when element is visible (#154)

Browse Source 
Another great catch. Thanks!
This commit is contained in:
Chris Haynes
2020-08-02 11:49:47 +01:00
committed by GitHub
parent 887bfb258b
commit b51871aca3
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/tab-group/tab-group.tsx
View File

@@ -53,9 +53,16 @@ export class TabGroup {
}
componentDidLoad() {
// Set initial tab state
this.setAriaLabels();
this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);
// Set initial tab state when the tabs first become visible
const observer = new IntersectionObserver((entries, observer) => {
if (entries[0].intersectionRatio > 0) {
this.setAriaLabels();
this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);
observer.unobserve(entries[0].target);
}
});
observer.observe(this.host);
focusVisible.observe(this.tabGroup);
// Update aria labels if the DOM changes