From 00349e79908f5432bc6dd0236a8e2d5cdfe5a1f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Radek=20=C5=A0er=C3=BD?= Date: Fri, 2 May 2025 12:38:18 +0200 Subject: [PATCH 1/3] fix: Media changes no longer affect unrelated collapsable items When the media condition changes for a group of collapsable items, the `handleDefaultExpanded` method now only processes items whose media matches the current condition. --- src/Collapsable.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/Collapsable.ts b/src/Collapsable.ts index 091eaee..f9c82a9 100644 --- a/src/Collapsable.ts +++ b/src/Collapsable.ts @@ -151,7 +151,7 @@ export class Collapsable { } } - public handleDefaultExpanded(): void { + public handleDefaultExpanded(media?: MediaQueryList | null): void { this.prepareDefaultExpanded() const { options } = this @@ -163,7 +163,15 @@ export class Collapsable { }) this.items - .filter((item) => !this.defaultExpandedItem.includes(item)) + .filter((item) => { + // When media is being handled, skip items without media or items with different media or not matching media. + if (media && (!item.media || item.media.media !== media.media || !media.matches)) { + return false + } + + // For other items, return whether they should be default expanded or not. + return !this.defaultExpandedItem.includes(item) + }) .forEach((item) => { item.collapse(collapsableEvent, null, true) }) From 213263f1f8cee345a7b2bb75726d71012e553d3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Radek=20=C5=A0er=C3=BD?= Date: Fri, 2 May 2025 12:41:32 +0200 Subject: [PATCH 2/3] fix: Filter expanded items by media query in `getExpanded` The `getExpanded` method now checks media query conditions, ensuring only items matching their media settings are considered expanded. Items without a matching media condition (collapsable is inactive) are ignored. This handles edge cases where items in the same group have mixed media conditions. --- src/Collapsable.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Collapsable.ts b/src/Collapsable.ts index f9c82a9..2bc0074 100644 --- a/src/Collapsable.ts +++ b/src/Collapsable.ts @@ -186,7 +186,7 @@ export class Collapsable { } public getExpanded(): CollapsableItem[] { - return this.items.filter((item) => item.isExpanded) + return this.items.filter((item) => item.isExpanded && (!item.media || (item.media && item.media.matches))) } public expandAll(data?: any): void { From 0dec59b5284a295e19f92c293576efc0952c1fa4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Radek=20=C5=A0er=C3=BD?= Date: Fri, 2 May 2025 12:52:21 +0200 Subject: [PATCH 3/3] fix: Improved accordion behavior During accordion initialization, all items except the default expanded one are closed first, and only then is the default expanded item opened. Additionally, when collapsing other items upon expanding one, the logic avoids collapsing the item that will be re-expanded immediately afterward. --- src/Collapsable.ts | 9 ++++++--- src/CollapsableItem.ts | 11 ++++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/Collapsable.ts b/src/Collapsable.ts index 2bc0074..559e8c1 100644 --- a/src/Collapsable.ts +++ b/src/Collapsable.ts @@ -158,10 +158,9 @@ export class Collapsable { const collapsableEvent = new CustomEvent('init.collapsable', { bubbles: true }) const force = !options.collapsableAll - this.defaultExpandedItem.forEach((item) => { - item.expand(collapsableEvent, null, force) - }) + // First, close all the items but the default expanded and then expand the default expanded. The order of + // operations is necessary for correct accordion collapsable. this.items .filter((item) => { // When media is being handled, skip items without media or items with different media or not matching media. @@ -175,6 +174,10 @@ export class Collapsable { .forEach((item) => { item.collapse(collapsableEvent, null, true) }) + + this.defaultExpandedItem.forEach((item) => { + item.expand(collapsableEvent, null, force) + }) } public getExtLinkById(id?: string): CollapsableExtLink[] { diff --git a/src/CollapsableItem.ts b/src/CollapsableItem.ts index a085013..37fae02 100644 --- a/src/CollapsableItem.ts +++ b/src/CollapsableItem.ts @@ -291,9 +291,14 @@ export class CollapsableItem { // This allows us to collapse expanded item even if there might be collapseAll === false option this.collapsable.promiseOpen = true - // If accordion, we have to collapse previously opened item before expanding; if accordion element hasn't - // collapsed, we can't continue - if (options.accordion && expandedItem.length && !expandedItem[0].collapse(collapsableEvent, data, force)) { + // If `accordion`, we have to collapse a previously opened item (if different from the current item) before + // expanding; if the opened item hasn't collapsed, we can't continue + if ( + options.accordion && + expandedItem.length && + this !== expandedItem[0] && + !expandedItem[0].collapse(collapsableEvent, data, force) + ) { this.collapsable.promiseOpen = false return false }