Hello all, I am working on a React app and having a difficult time trying to get the Search widget to work. I am using esri-loader and ArcGIS API for JavaScript 4.19.
I added a Search widget to my map and everything seems to be working fine up until the point when you try to click on one of the search (autocomplete) suggestions. Clicking on a suggestion closes the list of suggestions, however, the 'select-result' event never fires and the map never navigates to the selected feature. I'm trying this on a feature layer/service that supports pagination and has geometry associated with it. I'm not seeing anything in the console.
If I turn autoselect ON, the select-result event fires and the map will move, but it will always go to the first item in the suggestion list, which is not what I want.
Any ideas on why it's not working as expected with autoselect off? I'm out of ideas and not sure how to proceed.
Here is a sample of the code:
this.searchWidget = new Search({
view: this.view,
locationEnabled: false,
autoSelect: false,
includeDefaultSources: false,
sources: []
});
this.view.ui.add(this.searchWidget, { position: "top-right" });
// attached this listener; it is not firing
this.searchWidget.on("select-result", (event) => {
console.log(event);
});
this.lakes = new FeatureLayer({
id: "lakeLayer",
url: url,
definitionExpression: "state='CA'",
outFields: ["*"],
renderer: lakesRenderer,
popupTemplate: lakesTemplate
});
this.searchWidget.sources.add({
layer: this.lakes,
searchFields: ["assessmentunitname"],
displayField: "assessmentunitname",
exactMatch: false,
outFields: ["*"],
name: "Lakes & Areas",
placeholder: "Search"
});
Thank you-
Solved! Go to Solution.
Interesting. To be clear, the latest version it works at is 4.15 or 4.16? I don't see any changes to Search at 4.16 or 4.17, which also makes me wonder if there are issues with other widgets with these frameworks. It also might help if you could zip up an entire simplified project and send it over for further investigation. You can message me directly if you don't want to post it here.
Yes. For me, 4.16 is the latest version it works at. 4.17 (and everything after) breaks it.
I can pull something together and send it to you by the end of the day tomorrow
Hi @Noah-Sager ,
I'm experiencing the same issue with VueJS. Spent a few good hours tracing the source. I thought its styling but it's definitely the esri-loader - I didn't test it isolated yet outside of VueJS, but pretty confident that it will be reproduced.
The esri-loader doesn't seem to be maintained much in terms of issues and unfortunately ESM fails to be integrated with the Vue setup I'm facing.
Would be good to find a workaround for this. It seems to be the behaviour of the dropdown list implemented in the widget
@ShellyM you might be happy to hear that I found a better solution than the one you marked 🙂 The next release of the JS API (4.20) seems to fix this issue + surprisingly, it's already reachable and available (not officially) through the esri-loader, so you can test it but I'd suggest "productionise" this only after the official release which should be in the next few weeks
@shaylaviAwesome, I'm happy to hear it will be fixed in the next release. Thank you!
For anyone who is still following this (or who may stumble upon this thread), I tried out version 4.20 and can confirm that the search widget is working. Switching to 4.20 also fixed some other issues I was having with the feature table widget. Can't wait for the official release 🙂