fix(accordion): not remove hidden content from the DOM

baloise · Dec 7, 2022 · 1f52f95 · 1f52f95
1 parent 88db619
commit 1f52f95
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 34 deletions.
diff --git a/packages/components/src/components/bal-accordion/bal-accordion.sass b/packages/components/src/components/bal-accordion/bal-accordion.sass
@@ -29,6 +29,10 @@
       margin-bottom: var(--bal-space-desktop-medium)
 
 .bal-accordion__content
-  display: none
+  visibility: hidden
+  overflow: hidden
+  height: 0
   &--active
-    display: block
+    visibility: visible
+    overflow: auto
+    height: auto
diff --git a/packages/components/src/components/bal-tabs/bal-tabs.tsx b/packages/components/src/components/bal-tabs/bal-tabs.tsx
@@ -9,6 +9,7 @@ import { BEM } from '../../utils/bem'
 import { getPlatforms, isPlatform } from '../../utils/platform'
 import { stopEventBubbling } from '../../utils/form-input'
 import { ResizeHandler } from '../../utils/resize'
+import { areArraysEqual } from '@baloise/web-app-utils'
 
 @Component({
   tag: 'bal-tabs',
@@ -22,7 +23,6 @@ export class Tabs {
   private didInit = false
   private mutationO?: MutationObserver
   private timeoutTimer?: NodeJS.Timer
-  private accordion: HTMLBalAccordionElement | null = null
   private tabsId = `bal-tabs-${TabsIds++}`
 
   @State() tabsOptions: BalTabOption[] = []
@@ -136,30 +136,20 @@ export class Tabs {
     this.moveLine(this.getTargetElement(this.value))
   }
 
+  @Listen('balChange', { target: 'window' })
+  async accordionChangeHandler(event: Events.BalAccordionChange) {
+    const accordion = this.el.closest('bal-accordion')
+    if (event.target === accordion) {
+      this.moveLine(this.getTargetElement(this.value))
+    }
+  }
+
   connectedCallback() {
     this.platform = getPlatforms()
     this.debounceChanged()
-    this.updateTabs()
-
-    const accordion = (this.accordion = this.el.closest('bal-accordion'))
-
-    if (accordion) {
-      accordion.addEventListener('balChange', this.accordionChange)
-    }
-
-    this.mutationO = watchForTabs<HTMLBalTabItemElement>(this.el, 'bal-tab-item', () => {
-      this.updateTabs()
-    })
   }
 
   disconnectedCallback() {
-    const accordion = this.accordion
-
-    if (accordion) {
-      accordion.removeEventListener('balChange', this.accordionChange)
-      this.accordion = null
-    }
-
     if (this.mutationO) {
       this.mutationO.disconnect()
       this.mutationO = undefined
@@ -168,15 +158,22 @@ export class Tabs {
 
   componentDidLoad() {
     this.didInit = true
-    let value = this.value
-    if ((value === undefined || value === '') && this.interface !== 'navigation') {
-      const availableTabs = this.tabsOptions.filter(t => !t.disabled)
-      if (availableTabs.length > 0) {
-        value = availableTabs[0].value
+
+    this.updateTabs().then(() => {
+      let value = this.value
+      if ((value === undefined || value === '') && this.interface !== 'navigation') {
+        const availableTabs = this.tabsOptions.filter(t => !t.disabled)
+        if (availableTabs.length > 0) {
+          value = availableTabs[0].value
+        }
       }
-    }
-    this.value = value
-    this.valueChanged(value, this.value)
+      this.value = value
+      this.valueChanged(value, this.value)
+    })
+
+    this.mutationO = watchForTabs<HTMLBalTabItemElement>(this.el, 'bal-tab-item', () => {
+      this.updateTabs()
+    })
   }
 
   componentDidRender() {
@@ -216,7 +213,9 @@ export class Tabs {
   private async updateTabs() {
     try {
       await Promise.all(this.tabs.map(value => value.getOptions())).then(tabsOptions => {
-        this.tabsOptions = tabsOptions
+        if (!areArraysEqual(this.tabsOptions, tabsOptions)) {
+          this.tabsOptions = tabsOptions
+        }
       })
       const activeTabs = this.tabsOptions.filter(t => t.active)
       if (activeTabs.length > 0) {
@@ -327,10 +326,6 @@ export class Tabs {
     return tab.value === this.value
   }
 
-  private accordionChange = () => {
-    this.moveLine(this.getTargetElement(this.value))
-  }
-
   render() {
     const block = BEM.block('tabs')
     const isSteps = this.interface === 'steps' || this.interface === 'o-steps'