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

[ShellyM]

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-

[Noah-Sager]

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

[ShellyM]

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

[Noah-Sager]

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.

[ShellyM]

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)` }} />
        )
    }

[Noah-Sager]

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

[Noah-Sager]

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.

[ShellyM]

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.

[ClintonCrick · Accepted solution]

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.

[ShellyM]

@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?