What is the recommended method to load the Search Widget?

[slead]

I'm using react-arcgis to load a map, then within the onLoad callback I'm adding the SearchWidget using the standard JS API syntax (simplified snippet):

import React from 'react';
import { Map } from '@esri/react-arcgis';
import Search from "esri/widgets/Search";

<Map className="full-screen-map" onLoad={this.handleMapLoad} />;

handleMapLoad(map, view) {
  const searchWidget = new Search({
    view: view,
  });
  view.ui.add(searchWidget, {
    position: "top-right"
  });
}

Actual behavior The search widget loads as expected, but when entering a search term returns Paused on promise rejection and Uncaught (in promise).

I saw your response in https://github.com/Esri/react-arcgis/issues/35 regarding a method to use the Search widget, but you also say "Once your app is integrated with Esri's API, I think it is best to use the API directly and have the wrapper (react-arcgis) be as transparent as possible".

Is the above syntax a valid way to use the Search Widget? If not, how would I integrate the SearchWidget component described at https://github.com/Esri/react-arcgis/issues/35 given that I wish the Search widget to exist within the map's UI? thanks

Screenshots

Versions (please complete the following information):

• react-arcgis version: 5.1.0
• esri-loader version: 2.15.0
• ArcGIS API for JavaScript version: 4.16
• Browser: Chrome v86.0

[gavinr]

Instead of import Search from "esri/widgets/Search", I think you should use loadModules from esri-loader to load that widget:

loadModules(["esri/widgets/Search"]).then(([Search]) => {
  const searchWidget = new Search({
    view: view
  });
  view.ui.add(searchWidget, {
    position: "top-right"
  });
});

Here's a working demo: https://codesandbox.io/s/search-widget-with-react-arcgis-tudmf?file=/src/index.js

[slead]

@gavinr Thanks for the fast response. I'm still seeing the same behaviour when I try this approach.

Interestingly it only seems to occur if the Chrome Developer Tools are open - if the Dev Tools are closed the search works as expected.

(There is a minor issue with the Search tool which may be completely unrelated to this issue. I'm using a custom sources parameter comprising the layers in my map. One of the layers contains points, while the others are polygon. If I click on the results from for the point layer first, the map highlights the found point but doesn't zoom. If I select a polygon first, then search for a point, the map correctly highlights AND zooms to the point. Like it said this may be unrelated to the promise issue but I'm mentioning it just in case it helps.)

I note a similar issue with your sample with the Dev Tools open:

Is that paused on promise rejection related, or a red herring due to the sandbox app?

[gavinr]

Huh, I've tested on two separate computers/browsers and I'm not getting that issue - seems to work ok:

Could you please try in an incognito window so it disables your extensions? Also try on a separate machine or browsers?

[slead]

there must be something else wrong with my setup so i'll close this for now. Thanks for showing the recommended way to load the widgets