topic Re: React: Clicking on a Search widget suggestion does nothing ('select-result' event does not fire) in ArcGIS JavaScript Maps SDK Questions

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

ShellyM — Mon, 17 May 2021 23:11:34 GMT

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-

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

Noah-Sager — Tue, 18 May 2021 15:44:21 GMT

Hi @ShellyM, this is an interesting question. I'm not sure off the top of my head, but I think we should try to simplify the workflow to narrow down the issue. Below is a simple JavaScript app that uses one featureLayer with a definitionExpression as the source for a Search widget. Can you try with your data and confirm if this works as expected?

test-app

https://codepen.io/noash/pen/MWpjdvv?editors=1000

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

ShellyM — Tue, 18 May 2021 19:08:20 GMT

Hi @Noah-Sager, I tried it with my own data and it works as expected. https://codepen.io/shell_m/pen/MWpbWQZ

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

Noah-Sager — Tue, 18 May 2021 19:17:17 GMT

Excellent. This is progress. Can you try instantiating the Search widget the same way in the React app? Instead of initializing it with an empty array for the sources, and then adding the layerSource to the widget.

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

ShellyM — Tue, 18 May 2021 19:44:35 GMT

Hi @Noah-Sager, I used the same code from the codepen and put it in my React app. The only two differences are that I am using esri-loader and I also changed the view container.

Now I'm having the same issue as before. The search suggestions come up just fine, but clicking on a suggestion doesn't do anything (it doesn't even update the search box text). If I type something in the search box and then click on the magnifying glass icon (instead of clicking on a suggestion), then the map will go to the first feature in the suggestion list.

componentDidMount() { loadModules(['esri/Map', 'esri/views/MapView', 'esri/layers/FeatureLayer', 'esri/widgets/Search', 'esri/tasks/Locator']) .then(([Map, MapView, FeatureLayer, Search, Locator]) => { const map = new Map({ basemap: "gray-vector" }); const view = new MapView({ container: this.mapRef.current, map: map, center: [-119.36, 37.504], // lon, lat zoom: 5 }); const lakes = new FeatureLayer({ url: "https://gispublic.waterboards.ca.gov/portalserver/rest/services/Hosted/All_CA_Named_Streams_and_Lakes/FeatureServer/1", definitionExpression: "county='Placer'", popupTemplate: { title: "{name}" } }); map.add(lakes); const searchWidget = new Search({ view: view, includeDefaultSources: false, sources: [{ layer: lakes, searchFields: ["name"], displayField: "name", exactMatch: false, outFields: ["*"], name: "Lakes", placeholder: "example: Lake Tahoe" }] }); view.ui.add(searchWidget, { position: "top-right" }); }); }

render() { return ( <div className="map" ref={this.mapRef} style={{ width: "60vw", height: `calc(100vh - 60px)` }} /> ) }

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

Noah-Sager — Tue, 18 May 2021 19:52:05 GMT

Ok, thanks for the update. Let me do some additional digging and I'll respond back here when I have an update.

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

Noah-Sager — Tue, 18 May 2021 20:40:01 GMT

Hi @ShellyM, I think we're making progress. I worked with the infamous Rene Rubalcava on this and we got a test-app with React and esri-loader that seems to work fine:

https://codesandbox.io/s/agitated-leavitt-1phqw?file=/src/App.js

If you're using class based React components, it sounds like there could be some DOM update interactions that are causing the issue. With lots of "this" references and the React DOM stuff, it's difficult to say for certain though.

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

ShellyM — Tue, 18 May 2021 23:16:37 GMT

Hi @Noah-Sager, many thanks to you (and Rene) for looking into this.

I rewrote my class component as a functional component similar to what's in your codepen and unfortunately it's still doing it. Clearly there is some conflict with the React setup I have (which is a bare bones starter using Gatsby v3.4.1).

I then created a new app with create-react-app and tried it in that environment, similar to your codepen. The search widget works as expected in create-react-app, confirming that the issue stems from some conflict with Gatsby and/or the Gatsby setup.

As for the app, I'll have to think about what to do next. Thanks for troubleshooting with me.

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

ClintonCrick — Wed, 19 May 2021 14:21:04 GMT

We see this same issue in a Vue 2.x app that is also using esri-loader. First appears for us in ArcGIS API for JavaScript 4.17. Issue does not appear when using older versions, and we've had to leave our app pinned to v4.15.

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

ShellyM — Wed, 19 May 2021 18:57:07 GMT

@ClintonCrickThis did it. I changed the esri-loader default options to use v4.15 and the Search widget now works in my React/Gatsby app. Thank you!

@Noah-SagerIs there any chance of ESRI looking into what changed in v4.17 and fixing it in a future release?

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

Noah-Sager — Wed, 19 May 2021 19:11:48 GMT

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.

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

ShellyM — Wed, 19 May 2021 20:16:40 GMT

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

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

shaylavi — Mon, 21 Jun 2021 16:49:09 GMT

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

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

shaylavi — Thu, 24 Jun 2021 00:56:03 GMT

@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

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

ShellyM — Mon, 28 Jun 2021 18:04:04 GMT

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

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

ShellyM — Sat, 03 Jul 2021 01:48:21 GMT

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 🙂