adobe / aem-core-wcm-components

Standardized components to build websites with AEM.
https://docs.adobe.com/content/help/en/experience-manager-core-components/using/introduction.html
Apache License 2.0
743 stars 750 forks source link

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

Closed ArtixZ closed 4 years ago

ArtixZ commented 5 years ago

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

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.

Screen Shot 2019-10-01 at 5 05 00 PM

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

ArtixZ commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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:

Screen Shot 2019-10-23 at 12 16 32 PM

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:

Screen Shot 2019-10-24 at 9 57 00 AM

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 commented 5 years ago

Does it have to be in an editable template?

andreeadracea commented 5 years ago

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.

Screenshot 2019-11-01 at 16 50 55

vladbailescu commented 4 years ago

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

image

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 commented 1 year ago

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>