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]

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?

[FC_Basson]

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.

[Sage_Wall]

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

[FC_Basson]

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.

[FC_Basson]

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.

[Sage_Wall]

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. 

[Sage_Wall · Accepted solution]

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

[FC_Basson]

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?

[Sage_Wall]

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