Hi all,
I am trying put a search widget into a sidebar in my project app, but am running into some issues.
Issues I'm seeing:
- when trying to render the SearchBar in my Toolbar component, the search widget seems to get correctly created but never appears in my sidebar.
- if I put the SearchBar into the Header component (not a lazy loaded component), it works on page load, but if I save the SearchBar file again, the search bar disappears. See below for how I am implementing the SearchBar.
I've created a github repo to illustrate issues I am seeing. https://github.com/clintonlunn/arcgis-react-template. Any suggestions would be much appreciated.
import Search from "@arcgis/core/widgets/Search.js";
import React, { useContext, useEffect, useRef } from "react";
import { MapContext } from "../contexts/MapProvider";
function SearchBar() {
const { view } = useContext(MapContext);
const searchDivRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
let searchWidget: __esri.widgetsSearch;
if (view && searchDivRef.current) {
console.log("Creating search widget");
console.log("View:", view);
searchWidget = new Search({
view: view,
sources: [],
container: searchDivRef.current,
});
console.log("Search widget:", searchWidget);
} else {
console.log("View or searchDivRef.current is not available");
}
return () => {
if (searchWidget && searchWidget.destroy) {
searchWidget.destroy();
}
}
}, [view]);
return <div ref={searchDivRef}></div>;
}
export default SearchBar;
Thank you,
Clinton