Skip to content

[Bug][6.6.2] Accordion height for pre "is-active" accordion item not correct #12044

@tobidemski

Description

@tobidemski

Expected Behavior

In previous versions (<6.6.2) the accordion works as expected.
We have a nested accordion where the first level is always closed but the second level gets an "is-active" css class at the accordion-item (on page load) if the user has some filter previously activated. Before the upgrade to 6.6.2 if we open the first level accordion the second level was opened as expected but now the height and elements in the second level are broken.

6.6.2 with "is-active" on page load:
image

6.6.2 for all additional accordion items which has not set the is-active class on page load.
image

All versions before 6.6.2 shows our accordion correctly like the second case above. (Opened and correctly calculated height)
If i downgrade to 6.6.1 / 6.6.0 / 6.5.3 our accordion is working normal.

Current Behavior

The height is not correctly if the "is-active" class is set before the page is rendered.
The accordion looks broken.

Possible Solution

Currently i dont know how to fix it (expect to downgrade the version)

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://codepen.io/DarkStaRX/pen/VwvZBGx
I set the css class "is-active" above the headline "Test 1.1"
If you open the first accordion you will see height problems with the first (currently active) accordion. this just happens if you set the is-active class on the element by yourself. all other accordions working correctly.

How to reproduce:

  1. Create a new accordion
  2. Create a new nested accordion in the first one.
  3. Set the active class on the first nested accordion.
  4. Create a addition nested accordion below the active accordion
  5. see the result ist broken for the active accordion

Context

Nested accordions to provide links for different categories. Working currently on production in a lower version of foundation.

Your Environment

  • Foundation version(s) used: 6.6.2
  • Browser(s) name and version(s): Chrome 80.0.3987.163
  • Device, Operating System and version: Windows 10 1809 (OS Build 17763.973)
  • Link to your project: Private Repository

Checklist

  • I have read and follow the CONTRIBUTING.md document.
  • This is a bug report or a feature request.
  • There are no other issues similar to this one.
  • The issue title and template are correctly filled.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions