Search Widget disable or clear highlight of results in map

[SebastianKrings]

After hours of research I unfortunately do not find a solution and could need some help.

When using the search widget any resulting features from the search is highlighted in the map:

I would like to disable that or clear that afterwards.

I tried disabling it using 'resultGraphicEnabled: false' but without luck. The highlight still appears.

const searchWidget = new Search({
	view: mapView,
	popupEnabled: false, //disable single-popup for selected result
	includeDefaultSources: false, //disable default esri world locator service
	allPlaceholder: placeholderText, //only applies if an all-option is available (at least two resources must be in place)
	resultGraphicEnabled: false, // do not highlight features on map
	locationEnabled: false,
	goToOverride: (_view, parameters) => { .... },
	sources,
	container: this.elementRefSearch!.nativeElement
});

I also tried to clear the selection using 'searchWidget.clear()'. This clears the search term but the highlight keeps being in the map.

searchWidget.on("search-complete", async (_) => {
	searchWidget.clear();
});

If I do nothing of this by clear the search by hind by hitting the X button right next to the search term the highlighting disappears just as desired. I would have expected that at least searchWidget.clear() would exactly do this job but looks like it doesnt.

Maybe the search-complete event is not far enough at the end of the event stack. Maybe the highlight happens right after this event is finally handled. So the clear-call would happen right before that while the highlight still happens afterwards, even the search got cleared. Dunno, just wild guesses.

Hopefully someone has got an idea for me. Thanks.

[JoelBennett]

It seems to me that setting resultGraphicEnabled to false should have done it, but since it didn't, there are alternatives.  For example, sources is a collection of SearchSource objects.  Each of those has its own resultGraphicEnabled property, so you might try setting those to false.

If that doesn't work, SearchSource objects also have a resultSymbol property that allows you to define the appearance of the selection symbol.  You might try setting that property with a completely transparent symbol.  For example:

//SimpleMarkerSymbol for points
{
	type: "simple-marker",
	style: "square",
	color: [0,0,0,0],
	size: "8px",
	outline: {
		color: [0,0,0,0],
		width: 1
	}
}

or

//SimpleFillSymbol for polygons
{
	type: "simple-fill",
	color: [0,0,0,0],
	style: "solid",
	outline: {
		color: [0,0,0,0],
		width: 1
	}
}

[SebastianKrings]

When you say 'setting resultGraphicEnabled to false should have done it'
Doesnt this then sound like a bug?

But when I use this sample and add the property it does not show the result graphics. So that seems to work.
https://developers.arcgis.com/javascript/latest/sample-code/widgets-search-multiplesource/
So may I am missing something. We are using 4.31.6.

I reduced my code to the following which still does not work.

const searchWidget = new Search({
	view: mapView,
	includeDefaultSources: false, //disable default esri world locator service
	allPlaceholder: placeholderText, //only applies if an all-option is available (at least two resources must be in place)
	locationEnabled: false,
	resultGraphicEnabled: false,
	sources,
});

mapView.ui.add(searchWidget, {
  position: "top-right"
});

The only difference I may can imagine are the sources. I dont see anything obvious in the debugging on the sources data. Here is how we define them.

const layerConfig = layerHandle.config;
const searchSourceProperties = {
	layer,
	searchFields: layerConfig.searchFields,
	displayField: layerConfig.displayField,
	name: layerConfig.title,
	exactMatch: false,
	placeholder: layerConfig.searchFields?.join(','),
	outFields: (layerConfig as FeatureLayerConfig)?.outFields,
	suggestionTemplate
};

Regarding your further suggestions:

I tried this right before giving sources into the widget creation:

// disable highlight for every search source
sources.forEach(searchSource => {
	searchSource.resultGraphicEnabled = false;
});

also tried this without any effect:

const invisible = new SimpleMarkerSymbol({
	type: "simple-marker",
	style: "square",
	color: [0, 0, 0, 0],
	size: "8px",
	outline: {
		color: [0, 0, 0, 0],
		width: 1
	}
});

sources.forEach(searchSource => {
	searchSource.resultSymbol = invisible;
});

[JoelBennett]

It does sound like a bug, but since it works in the samples, I'm not sure what to say about it.  Are you also using 4.32?

The code I gave is the "autocast" syntax, so should work without the constructor:

const invisible = {
	type: "simple-marker",
	style: "square",
	color: [0, 0, 0, 0],
	size: "8px",
	outline: {
		color: [0, 0, 0, 0],
		width: 1
	}
};

sources.forEach(searchSource => {
	searchSource.resultSymbol = invisible;
});

I'm not certain it'll make a difference, but may be worth a try.  Other things would be to delete your temporary internet files (i.e. clear your cache), and user your browser's developer tools to ensure you see the latest code, and it's actually being executed by placing breakpoints, etc.

[JoelBennett]

My bad, just saw you were using 4.31.  I'll check the samples with that version.

[JoelBennett]

Setting resultGraphicEnabled in the sample with 4.31 works as well...

[Edvinas_S · Accepted solution]

A working demo: https://codepen.io/edvinasHB/pen/QwweNbO

I recreated your situation by using the same instance of the feature layer for both map and for search widget. This way Search widget symbol is overriden by Map and instead of showing a custom graphic, it uses highlights from the MapView.

You have two fixes:

1. Create a new instance of the Feature Layer to be used in the Search widget

2. Use the same layer instance, but clear the highlight after selection, like I did in the demo

searchWidget.on("select-result", function(event) {
    searchWidget.viewModel.clear()
});

[SebastianKrings]

This is wow.

Your solution just works fine plus you have a good explanation why this indeed is not a bug.

In the meantime I came over with another workaround. A bit dirty but works too.
I programmatically click the close-button of the search on search-result event.

searchWidget.on("select-result", function(_) {
	const clearButton = document.querySelector('.esri-search__clear-button');
	if (clearButton instanceof HTMLButtonElement) {
		clearButton.click();
	}
});

Looks like this click causes at least two things processed:

searchWidget.clear();
searchWidget.viewModel.clear()

So my final most clean solution now is:

searchWidget.on("select-result", function(_) {
    searchWidget.clear();
    searchWidget.viewModel.clear();
});