Disable Tooltip on Search Component

SebastianKrings

Hi,

there is a tooltip on the input which simply shows the previous placeholder/watermark.
Its gone, after typing any input.

I would like to disable this tooltip at all.

In case the locator is enabled as single source its gone and replaced by a locator message.
This shouldn't be disabled.

Seen on the sample here:
https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-search/

BTW:
Why dont you put samples into the docs any more as we were used to have on the old widget docs.
To be honest, I often am googlin for the widgets doc to get the samples related and their codepens.
Hope this will come back for components as well.

MatthewDriscoll

I believe the tool tip comes from the title.

const search = new Search({
  view: view
});

view.ui.add(search, "top-right");

search.when(() => {
  const input = search.container.querySelector("input");

  if (input) {
    input.removeAttribute("title");
  }
})

SebastianKrings

Hi,

thanks for reaching out.
Despite youre using old widget, I cannot see any title on the input. Do you?

MatthewDriscoll

Sorry, not many have moved onto components yet. Try this.

<arcgis-search
  id="search"
  popup-disabled
></arcgis-search>

My guess is the title is now behind the shadow dom. So you might need to wait until the component is ready.

const search = document.getElementById("search");

search.addEventListener("arcgisReady", () => {

  // access internal input inside shadow DOM
  const input = search.shadowRoot?.querySelector("input");

  // remove browser tooltip
  input?.removeAttribute("title");

});

SebastianKrings

its placed within an autocomplete, not an input.

<calcite-autocomplete autocomplete="off" class="autocomplete" overlay-positioning="fixed" title="Alle" alignment="start" placement="bottom-start" scale="m" status="idle" icon="search" max-length="128" name="" calcite-hydrated="">

Placing the following code into any one time method, removes the tooltip once.
On any change of the source I need to watch on that an re-run this code.

Kinda hacky, hoped for a more build-in solution.

<arcgis-search #search ... />
	

private readonly _searchRef = viewChild.required<ElementRef<HTMLArcgisSearchElement>>('search');
const searchElement = this._searchRef().nativeElement;

searchElement.addEventListener('arcgisReady', () => {
	// Das calcite-autocomplete Element im ersten Shadow DOM finden
	const autocomplete = searchElement.shadowRoot?.querySelector('calcite-autocomplete');
	
	autocomplete?.removeAttribute('title');
});

I tried the arcgisPropertyChange but this is not fired when changing the active search source via dropdown.

(arcgisPropertyChange)="searchPropertyChange($event)"

    searchPropertyChange(event: CustomEvent<{ name: String }>) {
        if (event?.detail?.name === 'active-source') {
            const autocomplete = this._searchRef().nativeElement.shadowRoot?.querySelector('calcite-autocomplete');
            autocomplete?.removeAttribute('title');
        }
    }

The breakpoint on the if is never hit.
Just noticed, that there is no attribute-name for searchSource like search-source. May that is an indicator that this property is not part of the event at all?