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

wait until registered to set initial state; fixes #1292

Browse Source
This commit is contained in:
Cory LaViska
2023-04-13 09:51:07 -04:00
parent 63194abf93
commit 5cf6a37ee2
1 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/tab-group/tab-group.ts
View File

@@ -70,6 +70,11 @@ export default class SlTabGroup extends ShoelaceElement {
@property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;
connectedCallback() {
const whenAllDefined = Promise.allSettled([
customElements.whenDefined('sl-tab'),
customElements.whenDefined('sl-tab-panel')
]);
super.connectedCallback();
this.resizeObserver = new ResizeObserver(() => {
@@ -89,20 +94,24 @@ export default class SlTabGroup extends ShoelaceElement {
}
});
// After the first update...
this.updateComplete.then(() => {
this.syncTabsAndPanels();
this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
this.resizeObserver.observe(this.nav);
// Set initial tab state when the tabs first become visible
const intersectionObserver = new IntersectionObserver((entries, observer) => {
if (entries[0].intersectionRatio > 0) {
this.setAriaLabels();
this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });
observer.unobserve(entries[0].target);
}
// Wait for tabs and tab panels to be registered
whenAllDefined.then(() => {
// Set initial tab state when the tabs become visible
const intersectionObserver = new IntersectionObserver((entries, observer) => {
if (entries[0].intersectionRatio > 0) {
this.setAriaLabels();
this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });
observer.unobserve(entries[0].target);
}
});
intersectionObserver.observe(this.tabGroup);
});
intersectionObserver.observe(this.tabGroup);
});
}