diff --git a/.changeset/tricky-buckets-sniff.md b/.changeset/tricky-buckets-sniff.md new file mode 100644 index 0000000000..1b592677b9 --- /dev/null +++ b/.changeset/tricky-buckets-sniff.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-components': patch +--- + +Resolved an issue where `post-accordion` components placed within inactive tab panels caused animation-related exceptions. \ No newline at end of file diff --git a/packages/components/src/animations/collapse.ts b/packages/components/src/animations/collapse.ts index 8e8a82d7d0..2187ab525b 100644 --- a/packages/components/src/animations/collapse.ts +++ b/packages/components/src/animations/collapse.ts @@ -1,6 +1,6 @@ const collapseDuration = 350; const collapseEasing = 'ease'; -const collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' }; +export const collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' }; const animationOptions: KeyframeAnimationOptions = { duration: collapseDuration, diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index 85b8a04165..74db190d76 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -10,7 +10,7 @@ import { Watch, } from '@stencil/core'; import { version } from '@root/package.json'; -import { collapse, expand } from '@/animations/collapse'; +import { collapse, collapsedKeyframe, expand } from '@/animations/collapse'; import { checkEmptyOrType, isMotionReduced } from '@/utils'; /** @@ -40,8 +40,18 @@ export class PostCollapsible { 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.', ); - - void this.toggle(!this.collapsed); + + if (!this.isLoaded) { + + const expandedKeyframe: Keyframe = { height: 'auto', overflow: 'visible' }; + Object.assign( + this.host.style, + this.collapsed ? collapsedKeyframe : expandedKeyframe + ); + this.isOpen = !this.collapsed; + } else { + void this.toggle(!this.collapsed); + } } /**