topic Re: Select Dropdown in Layer List Item Panel not working inside group layer in ArcGIS JavaScript Maps SDK Questions

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

FC_Basson — Fri, 01 Mar 2024 12:08:52 GMT

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?

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

Sage_Wall — Fri, 01 Mar 2024 15:42:41 GMT

Hi @FC_Basson,

Thanks for posting. We did significantly change the LayerList widget in this release. I'm glad you found the flow property useful. I'm having a little difficulty reproducing the behavior you are seeing with the calcite select. I was able to successfully add a calcite select component in this codepen https://codepen.io/sagewall/pen/BaEyBYr . I'm wondering if it may have something to do with calcite versions. Which version of Calcite Components are you using?

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

FC_Basson — Fri, 01 Mar 2024 19:01:02 GMT

Hi @Sage_Wall. I forgot to mention that I'm using CDS 2.5.1. I tried changing versions, but it did not change the select behaviour.

Your codepen is fairly accurate. One, and probably the only, difference I can see, is that I added more than one component to the item panel, i.e. an array of div components containing different functionality, of which one div contains a select dropdown. As I mentioned in my question, when I drag the layer list item outside of the group layer, the select suddenly works as expected.

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

Sage_Wall — Fri, 01 Mar 2024 22:42:59 GMT

That is really strange. Could you possibly create and share a simplified repro sample? It would really help to debug.

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

FC_Basson — Mon, 04 Mar 2024 07:31:00 GMT

I did some more inspection and simplified my panel content to include only the select, similar to you codepen example (which I see you've updated to enable the layer drag), but still the issue persists. There is definitely some issue with the select click events.

In the Event Listeners for the select, with flowEnabled set to false, the "pointerdown" event is defined like this.

This is exactly the same for the select in your codepen. However, when I remove the two "calcite-list" event listeners, the select starts to work. When I set flowEnabled to true and the select works as expected, I don't see those two "calcite-list" events in the "pointerdown" listener.

I'll explore some more and see what I can come up with. In the end, I'll be using the item panel with the flowEnabled option set to true, which will be the best workaround for this issue.

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

FC_Basson — Wed, 06 Mar 2024 06:28:02 GMT

I've run into some other issues too, especially with elements with jQuery interaction - events are not working as expected any longer. I've noticed in the DOM that 4.29 creates a new encapsulating element of class "interaction-container" - what exactly does this container do?

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

Sage_Wall — Wed, 06 Mar 2024 13:26:06 GMT

Hi @FC_Basson if you are using jQuery or any DOM queries by selector's you'll likely run into issues because of the shadow DOM introduced with the calcite components refactor. More info on shadow DOM can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM

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

Sage_Wall — Wed, 06 Mar 2024 13:38:56 GMT

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.

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

FC_Basson — Wed, 06 Mar 2024 13:44:03 GMT

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

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

Sage_Wall — Wed, 06 Mar 2024 13:50:03 GMT

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

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

Nicolas_ — Fri, 08 Mar 2024 21:20:35 GMT

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:

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

FC_Basson — Mon, 11 Mar 2024 07:23:58 GMT

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

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

Sage_Wall — Mon, 11 Mar 2024 10:20:57 GMT

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/

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

Sage_Wall — Mon, 11 Mar 2024 10:25:57 GMT

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.

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

FC_Basson — Mon, 11 Mar 2024 10:59:13 GMT

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.

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

Nicolas_ — Mon, 11 Mar 2024 12:11:11 GMT

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

Thank you!

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

FC_Basson — Mon, 11 Mar 2024 15:20:37 GMT

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.

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

FC_Basson — Thu, 14 Mar 2024 10:37:36 GMT

Hi @Sage_Wall

Here is an update to your codepen with the code that breaks the select (see line 51).
https://codepen.io/fcbasson/pen/jORMyVy

I want the group layers to not be sortable/draggable, but the sublayers can be sorted and dragged.

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

Sage_Wall — Thu, 14 Mar 2024 15:06:11 GMT

Thanks @FC_Basson , I see the issue now. I can create an issue and get this fixed. If you want to follow the progress you could submit a bug thru technical support and they can keep you updated on the progress, but I'll try and keep this community post updated as well when we get it fixed and built on the `next` branch for public testing.

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

Sage_Wall — Mon, 18 Mar 2024 20:28:35 GMT

Hi @FC_Basson , I created a calcite components issue for the underlying cause of the select not working. https://github.com/Esri/calcite-design-system/issues/8954