Select Dropdown in Layer List Item Panel not working inside group layer

[FC_Basson]

With the 4.29 release of the API, the LayerList widget has also been modified.  I have a Layer List widget with group layers, where individual layers are added to different group layers.  Custom content is then created for each layer (not group layer) when it is added (listItemCreatedFunction) and the content is added to the Layer List Item Panel, where some layer settings and functions can be performed.  A "calcite-select" element is also added to the list item panel, which worked fine in 4.28, but it would not open and show the list options in 4.29.  This only happens for layers inside the group layer of the Layer List widget.  If I drag that layer to outside of the group layer and it becomes part of the main layer list, the select dropdown works.

My workaround option, which I actually prefer now, is to set the layer list item's "flowEnabled" property to "true", which then opens the layer list item panel inside a "calcite-flow" item inside of the layer list widget.  Is there some other setting I can look at to enable the select dropdown to work for the layer inside of the group layer?

[Sage_Wall]

This is a well written blog on the topic as well. https://robdodson.me/posts/dont-use-jquery-with-shadow-dom/

tl;dr: jQuery plugins don't work inside of Shadow DOM because typically they try to query for something starting at the document level and the shadow root blocks this.

[FC_Basson]

Thanks, I was actually just reading that blog.  But still, with 4.28 all my jQuery was working fine. 

[Sage_Wall]

We did the refactor to calcite and introduced the shadow dom in 4.29

[FC_Basson]

After removing all jQuery from my code, I am still experiencing the same issue with JS API 4.29 and CDS 2.6.0.

[Sage_Wall]

Hi @FC_Basson 

Are you still using DOM queries by chance, just without jQuery?  Any DOM queries, especially if they begin at the document level, will likely fail.  It's really hard to debug without a repro case, I'm unable to replicate the bug.

[FC_Basson]

I use plenty of DOM queries, of which many start at document level and they all work.  When I isolate the "listItemCreatedFunction" code, the select works.  Unfortunately I can't share the larger code base.

[FC_Basson]

Hi @Sage_Wall 

This is the piece of code that breaks the select:

if (item.layer.type == "group") {
  item.sortable = false;
}

This check is done directly after the item is received from the create event.  I don't want the group layers to be sortable, but the child layers can be sorted, hence the "false" setting of the "sortable" property.  

[Nicolas_]

I got the same problem. Simply trying to show the legend with the "legend" keyword in the panel no longer works.

Code I use to create the panel item:

item.panel = new LayerListItemPanel({
    content: "legend",
    className: "esri-icon-legend",
    title: "Show legend",
    flowEnabled: true,
    visible: true
});

The result is that no legend is showing and the action icon also doesn't show properly:

Calcite setup in my index.html: 

<script src="https://js.arcgis.com/calcite-components/2.6.0/calcite.esm.js" type="module"></script>
<link rel="stylesheet" href="https://js.arcgis.com/calcite-components/2.6.0/calcite.css" />
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />

[Sage_Wall]

Hi @Nicolas_ ,

It looks like there may be a typo in your code.  There is no LayerListItemPanel class in the SDK.  The ListItemPanel class is a little strange as it's not intended to be constructed.  The legend should work if you just pass in an object as shown in this sample.

https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-legend/

[Nicolas_]

That did work. Typescript is complaining about something, but I can add "//@ts-ignore" before the panel declaration to make it work.

Thank you!