[JSAPI 4.8 vs 4.7]LayerList with Legend widget shows unwanted text

QiZhao

I'm trying to add Legend into LayerList widget, using the same method as this example. When I test this with a multi-layer webmap, there are some unwanted "legend" text shown in the LayerList. See the screenshot below.

These unwanted "legend" texts only exist in v4.8 API. v4.7 is working perfectly as expected. Also, if I clicked the toggle button to hide and show legend panel, those texts will be gone. This behavior is seen in both latest Chrome and MS Edge browsers.

The source code is very simple:

<SPAN class="comment token">// Add a legend instance to the panel of a</SPAN>
<SPAN class="comment token">// ListItem in a LayerList instance</SPAN>
<SPAN class="keyword token">const</SPAN> layerList <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">LayerList</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
&nbsp; listItemCreatedFunction<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">const</SPAN> item <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; item<SPAN class="punctuation token">.</SPAN>panel <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"legend"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; open<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Below is a running example:

https://codepen.io/anon/pen/RJzzep

QiZhao

This issue has been fixed in latest v4.9 API. Thanks.

GrantMcCormick1_2-1720551657656.png

GrantMcCormick1_3-1720551752357.png