[Accordion] Possibility to edit a single container

[stratosdw]

Bug Report

Current Behavior After creating an Accordion component and adding a container we don't have the possibility to edit that component.

Expected behavior/code We should be able to edit when only a single component is added.

Environment

• AEM as Cloud Service latest version (v2022.2.6276.20220205T222203Z-220100)
• Core Components version 2.17.14

Possible Solution Allow the single component to be selected or enabling the "Select Panel" action when only 1 component exists.

Additional context / Screenshots

It works with more than 1 component, because then we have access to the "Select panel" action. There is a workaround, if we change tabs in Content Side Panel (From Assets to Content Tree for example) and go to the Content tree and click inside the Accordion container > Created component, we will be able to edit it, but that's not really author friendly.

[bpauli]

@stratosdw I was not able to reproduce the issue with the core component library and also not with a new project created with the aem-project-archetype [1]. Can you please also test the accordion with a new project based on the archetype? Just to make sure that this issue is not caused by some custom CSS on project level. If you see this issue also with the new project it would be helpful to provide a screen recording.

Thanks!

[1] https://github.com/adobe/aem-project-archetype

[stratosdw]

@bpauli, after installing aem-project-archetype still have the same issue. When adding the Accordion component OOTB from the archetype, 2 items are added by default therefore no issue as seen here:

By adding the Core components Accordion (v1), the behaviour is the same as can be seen here:

Thank you

[bpauli]

@stratosdw As I can't reproduce this issue can you please share your client details (Browser, OS)? Thanks!

[stratosdw]

@bpauli , macOS Monterey 12.2.1, Chrome/Brave/Safari latest versions This is also reported by colleagues with different OS/browsers.

Got a screen record about it so maybe it can help clarify the issue:

https://user-images.githubusercontent.com/8149798/154932029-13e25bd9-25c5-4f67-a6f8-b84b7ef7c4d9.mp4

[AlexanderEggersDivae]

I have the same issue in MS Edge. Reports from my teammates leads me to believe this is a deeper issue than just the accordion, and in fact presents itself in any similarly component using panels.

[AlexanderEggersDivae]

@bpauli I have reproduced this with the archetype you linked. Changing the file libs/core/wcm/components/commons/editor/clientlibs/panelselect/js/panelselect.js:415 to return (children.length > 0 && isPanelContainer); fixes the issue. This seems sensible to me, forcing a single panel open to edit it and then undoing that checkbox again feels like a workaround.

[stratosdw]

@bpauli was the additional information helpful enough to help clarify the situation?

[bpauli]

@stratosdw Thank you for your effort and patience. I was able to reproduce the issue.

[bpauli]

@adobe export issue to Jira project SITES as Bug

[github-jira-sync-bot]

:white_check_mark: Jira issue SITES-5304 is successfully created for this GitHub issue.

[bpauli]

In the PR #2060 I made the change as suggested by @AlexanderEggersDivae and enable the panel selector for container with only one element. Thanks @AlexanderEggersDivae for this suggestion.

[chillinPanda]

Hi @bpauli ,

this fix is not included in Core Components 2.18.8 release.

The commit was done prior to the release date. I am wondering why this change is not included.

Is it going to be in the next one?

[bpauli]

@chillinPanda right, this fix will be included into the next regular release (2.19.0) which will be done from the main branch. 2.18.x were only hotfix releases. 2.19.0 is scheduled for this week.