[Tabs] After adding a Tabs component, only the first component on page can be authored

[ArtixZ]

Bug Report

Current Behavior After adding a Tabs component(which has editor-hook), only the first component on page(a big page parsys) can be authored. Others are marked as is-disabled.

It's because getPanelContainerType(attached link next) will try to iterate in its children to find out if there is a match. It means not only the Tabs component itself, but the page(the big page parsys) will be marked as a panel container as well, and only enable the first(based on activeIndex) component.

https://github.com/adobe/aem-core-wcm-components/blob/798d3947af9a83b53ce60fe7dd04908c8a4a4ec2/content/src/content/jcr_root/apps/core/wcm/components/commons/editor/clientlibs/panelcontainer/v1/js/panelContainerUtils.js#L113

Expected behavior/code All the components in the page should be author-able.

Environment

• AEM version and patch level (e.g. AEM 6.4.3)
• Core Components version (e.g. 2.4.0. it's in master branch as well)
• JRE version (e.g. Java(TM) SE Runtime Environment (build 1.8.0_152-b16))

Possible Solution Check if the container is registered in editor-hook. If it is, run updatePanelContainerOverlayState. Otherwise, don't.

The name in panelcontainer.js at editorhook folder should be the same as name of the editor(component).

        var panelContainerTypes = CQ.CoreComponents.panelcontainer.v1.registry.getAll();

        for (var i = 0; i < editables.length; i++) {
            var editable = editables[i];

            if (CQ.CoreComponents.panelcontainer.v1.utils.isPanelContainer(editable) && panelContainerTypes.findIndex(function(item){ return item.name === editable.name })>-1) {
                updatePanelContainerOverlayState(editable);
            }
        }

Additional context / Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

Only Image component can be activated for editing. Clicking on Tabs or Video component won't do anything.

[ArtixZ]

https://github.com/adobe/aem-core-wcm-components/blob/798d3947af9a83b53ce60fe7dd04908c8a4a4ec2/content/src/content/jcr_root/apps/core/wcm/components/commons/editor/clientlibs/panelcontainer/v1/js/contentTree.js#L56

Just attached the origin

[andreeadracea]

@ArtixZ, unfortunately I was not able to reproduce your issue. I attached a video with the steps I did in order to reproduce it. Please let me know if the steps you did in order to face this issue are different that what I did.

Tabs.mov.zip

[ArtixZ]

@andreeadracea Thanks for getting back!

It works just because you happen to have a different DOM structure, where Tab component is not a direct children:

You will reproduce the issue if you delete <div class="aem-Grid aem-Grid--12 aem-Grid--default--12"> in your page.

And this is the structure for us:

You can see, Tab component will be a children of an editable when execute this code: var children = editable.dom[0].children;

It means the layout container itself is marked as panelContainer, because there is a Tab component being a direct children.

[ArtixZ]

Does it have to be in an editable template?

[andreeadracea]

Hi @ArtixZ,

I tried to reproduce your issue doing what you suggested, but unfortunately I was not able. I've created a page which looks like this and I'm able to edit the tab component.

[vladbailescu]

I was unable to reproduce this either. I tried a simple page with a parsys and two components beneath it:

I'm closing this issue for now, I'd be happy to reopen it should you provide a small content package that allows us to reproduce it.

[powsurfer70]

For us, the solution was as simple as adding the core clientlib embed to our proxied component as the README says.

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='core.wcm.components.tabs.v1'}">
  ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>