fix: keep #accordion content until animation is done (#717)

* fix: ensure #accordion to have expanded state without animation * fix: keep #accordion content until animation is done * fix: ensure #accordion to have expanded state without animation during ssr * fix: keep #accordion content until animation is done * fix: ensure we remove inline styles after the height simulation
dnbexperience · Dec 4, 2020 · 3937ea3 · 3937ea3
1 parent f30fbde
commit 3937ea3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 28 deletions.
diff --git a/packages/dnb-ui-lib/src/components/accordion/Accordion.js b/packages/dnb-ui-lib/src/components/accordion/Accordion.js
@@ -214,26 +214,26 @@ export default class Accordion extends React.PureComponent {
     if (context && typeof context?.onInit === 'function') {
       context.onInit(this)
     }
-  }
-
-  componentDidMount() {
-    this._isMounted = true
 
     if (
       typeof window !== 'undefined' &&
-      isTrue(this.props.expanded_ssr || this.context?.expanded_ssr)
+      isTrue(props.expanded_ssr || context?.expanded_ssr)
     ) {
-      this.setExpandedState(false)
+      this.state.expanded = false
     }
 
-    if (isTrue(this.props.remember_state || this.context.remember_state)) {
+    if (isTrue(this.props.remember_state || context.remember_state)) {
       const expanded = this.store.getState()
       if (expanded) {
-        this.setExpandedState(true)
+        this.state.expanded = true
       }
     }
   }
 
+  componentDidMount() {
+    this._isMounted = true
+  }
+
   componentWillUnmount() {
     this._isMounted = false
 

diff --git a/packages/dnb-ui-lib/src/components/accordion/AccordionContent.js b/packages/dnb-ui-lib/src/components/accordion/AccordionContent.js
@@ -58,15 +58,9 @@ export default class AccordionContent extends React.PureComponent {
         isAnimating: false
       })
 
-      if (this.context.expanded) {
-        this.setState({
-          keepContentInDom: true
-        })
-      } else {
-        this.setState({
-          keepContentInDom: false
-        })
-      }
+      this.setState({
+        keepContentInDom: this.context.expanded
+      })
     })
 
     if (
@@ -92,14 +86,14 @@ export default class AccordionContent extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    const { expanded, prevent_rerender } = this.context
+    const { expanded, single_container } = this.context
     if (expanded !== this.state._expanded) {
       const isInitial = !expanded && this.state.isInitial
       this.setState(
         {
           _expanded: expanded,
           isInitial: false,
-          keepContentInDom: expanded || !isTrue(prevent_rerender)
+          keepContentInDom: true
         },
         () => {
           if (expanded) {
@@ -112,8 +106,9 @@ export default class AccordionContent extends React.PureComponent {
     }
 
     if (
+      isTrue(single_container) &&
       AccordionContent.getContent(prevProps) !==
-      AccordionContent.getContent(this.props)
+        AccordionContent.getContent(this.props)
     ) {
       this.anim.setContainerHeight()
     }
@@ -180,7 +175,7 @@ export default class AccordionContent extends React.PureComponent {
     const wrapperParams = {
       className: classnames(
         'dnb-accordion__content',
-        !expanded && 'dnb-accordion__content--hidden',
+        !expanded && !keepContentInDom && 'dnb-accordion__content--hidden',
         isAnimating && 'dnb-accordion__content--is-animating',
         className
       ),

diff --git a/packages/dnb-ui-lib/src/shared/component-helper.js b/packages/dnb-ui-lib/src/shared/component-helper.js
@@ -968,9 +968,6 @@ export class AnimateHeight {
   }
   getOpenHeight(state) {
     const currentHeight = window.getComputedStyle(this.elem).height
-    const currentPosition = window.getComputedStyle(this.elem).position
-    const parentPosition = window.getComputedStyle(this.elem.parentElement)
-      .position
 
     this.elem.parentElement.style.position = 'relative'
     this.elem.style.position = 'absolute'
@@ -979,10 +976,9 @@ export class AnimateHeight {
 
     const height = parseFloat(this.elem.clientHeight)
 
-    this.elem.parentElement.style.position =
-      parentPosition !== 'static' ? parentPosition : ''
-    this.elem.style.position = currentPosition
-    this.elem.style.visibility = 'visible'
+    this.elem.parentElement.style.position = ''
+    this.elem.style.position = ''
+    this.elem.style.visibility = ''
 
     switch (state) {
       case 'open':