search

AlaskaAirlines / auro-accordion

Custom element that allows users to toggle the display for sections of content
https://auro.alaskaair.com/components/auro/accordion
Apache License 2.0
1 stars 2 forks source link

Accordion not opening on contentstack test-env, but opens on constantstack preview page #139

Open EvieCutrell opened 5 days ago

EvieCutrell commented 5 days ago

Please verify the version of auro-accordion you have installed

4.0.2

Please describe the bug

  1. Go to "https://app.contentstack.com/#!/stack/blt2cefe12c88e9dd91/content-type/flex_page/en-us/entry/bltaaa8f8ac23324e11/edit?branch=main"
  2. Ensure you're on Version 31 in the top right.
  3. Click "Live Preview"
  4. Preview window opens up
  5. Open the "API Documentation" accordion on the sidenav.
  6. Accordion elements are cut short (there should be more there), but still appears.
  7. Copy live-preview URL (https://retrostack-test-frontdoor.azurefd.net/content/ndc/release-notes)
  8. Paste the url into a new tab for a 'normal' view of the page
  9. The sidenav now takes up half of the usable space because of how far the accordion chevron extends
  10. The accordion no longer opens/shows any content regardless of screen resolution (desktop vs mobile) actual-test-page live-preview

Reproducing the error on the docsite

None

Expected behavior

Accordion should work similar to how it does in the following link: https://codepen.io/ecutrell/pen/MWMOrgr accordion should show contents when open scrollable section or not text wrapping *all 8 lines are visible when open and not cut off

Code on Codepen and Contentstack are exactly the same.

What browsers are you seeing the problem on?

Chrome

Additional context

If unable to access contentstack env or any other questions please feel free to reach out to myself; Evelynn Cutrell

Exit criteria

No response

marnel-mangrubang commented 4 days ago

Hi @EvieCutrell, looks like the issue you are seeing in the preview page is caused by loading in the auro-sidenav and auro-accordion bundled js from the CDN. We are already loading in a version of these auro components in the content client so loading in another version could cause a race condition. Simply removing these should make the accordion work in your preview link.

Code to remove from the generic text rendering component inside Contentstack entry: Screenshot 2024-10-31 at 10 11 27 AM

If you require a later version of either the auro-sidenav or auro-accordion, please work with the ContentEnablement team to get the version we are using throughout our content client.

Also here is an example entry similar to your original page with the bundled js references removed. https://retrostack-test-frontdoor.azurefd.net/content/copy-accordion-issue