Select to view content in your preferred language

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

1286
19
Jump to solution
03-01-2024 04:08 AM
FC_Basson
MVP Regular Contributor

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?

1 Solution

Accepted Solutions
Sage_Wall
Esri Contributor

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

 

View solution in original post

19 Replies
Sage_Wall
Esri Contributor

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?

0 Kudos
FC_Basson
MVP Regular Contributor

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.

 

0 Kudos
Sage_Wall
Esri Contributor

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

0 Kudos
FC_Basson
MVP Regular Contributor

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.

FC_Basson_0-1709536339733.png

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.

0 Kudos
FC_Basson
MVP Regular Contributor

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
Esri Contributor

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
Esri Contributor

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
MVP Regular Contributor

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?

0 Kudos
Sage_Wall
Esri Contributor

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

0 Kudos