nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

In JavaScript 4.10, the second Search Widgets changes the properties on the main one

DanielWebb

I switching to JavaScript 4.10, the Search widget acts funny. I have two Search widgets in my app and when the second is activated it changes the properties on the main one.

Since this is the newest api, presumably this is a bug. When I switch to 4.8 or 4.9 it works fine.

I attached some screenshots showing what I'm talking about. The placeholder for the first widgets changes when the second is created.

First Search Widget.PNG

Second Search Widget.PNG

Find more posts tagged with

Accepted answers

MattDriscoll

Hi Daniel,

Thanks for bringing this to our attention. This is a bug with the Search widget sharing the same sources. In order to fix this, can you add the following line after you create your search widgets?

searchWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">_set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"allSources"</SPAN><SPAN class="punctuation token">,</SPAN> searchWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>allSources<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><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>

This will make a clone of the `allSources` collection which will allow you to modify it without affecting the other search widget. Feel free to add this one liner to the other widget as well.

We'll get this fixed for 4.11.

Thanks!

All comments

DanielWebb

Thank you, Matt! That seems to work.

MikkLauringson

Yes, it was an object. It works with instance. Also other solution was to set it after cloning.

resultSymbol: {type: 'picture-marker', ...}

Thank you!

MattDriscoll

Hey Mikk, can you make sure that the resultSymbol is an instance of a symbol and not an object? What symbol type is it?

MikkLauringson

If a source has resultSymbol, then it causes an error.

ERROR TypeError: "this.resultSymbol.clone is not a function"

clone /4.10/esri/widgets/Search.js:135:396

MattDriscoll

Here is a codepen too: A Pen by Matt Driscoll

MattDriscoll

Hi Daniel,

Thanks for bringing this to our attention. This is a bug with the Search widget sharing the same sources. In order to fix this, can you add the following line after you create your search widgets?

searchWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">_set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"allSources"</SPAN><SPAN class="punctuation token">,</SPAN> searchWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>allSources<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><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>

This will make a clone of the `allSources` collection which will allow you to modify it without affecting the other search widget. Feel free to add this one liner to the other widget as well.

We'll get this fixed for 4.11.

Thanks!

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.