React: Clicking on a Search widget suggestion does nothing ('select-result' event does not fire)

4560
15
Jump to solution
05-17-2021 04:03 PM
ShellyM
New Contributor III

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-

15 Replies
Noah-Sager
Esri Regular Contributor

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.

0 Kudos
ShellyM
New Contributor III

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

0 Kudos
shaylavi
Esri Contributor

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

 

Shay
shaylavi
Esri Contributor

@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

Shay
ShellyM
New Contributor III

@shaylaviAwesome, I'm happy to hear it will be fixed in the next release. Thank you!

0 Kudos
ShellyM
New Contributor III

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 🙂

0 Kudos