nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

simulate click on close button of the features widget

LefterisKoumis

Would like to simulate clicking the close button of the features widget.

I tried this but it is not working. I suspect it is because of the shadow root.

const closeBtn = document.querySelector(".esri-features__close-button");
if (closeBtn) {  closeBtn.click(); }

Ideas? Thanks.

Find more posts tagged with

Accepted answers

LefterisKoumis

I figured it out. The easier way to programmatically close the popup and clear the selection/highlight from the map is to close the featuresWidget and emit a click event on the map. Simple.

      featuresWidget.close();    
     await new Promise(resolve => setTimeout(resolve, 50));
    
    // Simulate click at center
    view.emit("click", {
      mapPoint: view.center,
      x: view.width / 2,
      y: view.height / 2,
      stopPropagation: () => {}
    });

All comments

LefterisKoumis

I figured it out. The easier way to programmatically close the popup and clear the selection/highlight from the map is to close the featuresWidget and emit a click event on the map. Simple.

      featuresWidget.close();    
     await new Promise(resolve => setTimeout(resolve, 50));
    
    // Simulate click at center
    view.emit("click", {
      mapPoint: view.center,
      x: view.width / 2,
      y: view.height / 2,
      stopPropagation: () => {}
    });

LefterisKoumis

You misunderstood me. I want to simulate clicking the close button of the features widget when any of the widget located at the action bar is clicked. Nothing is broken. And no, we don't use div for every widget. Each widget in the action bar (Legend, basemaps, layer list...) uses its own panel in the features widget. There are so many examples of it in the Calcite site. I want remove the selection of the feature as I mentioned in the previous posting prior selecting another widget from the action bar.

Edvinas_S

If I understand correctly, your Basemap widget breaks Features widget. Is it possible that you gave the same div for both widgets? That way the second widget breaks the first one.

I don't typically work with off-map panels, but here's how I would do it: https://codepen.io/edvinasHB/pen/emmGBEj

Each widget gets it's own div. Basemap button in the top-right closes Features widget before opening Basemap Gallery widget. When you click on the map/feature, Basemap Gallery widget is closed and Features widget is opened.

blake.terhune

You can use the querySelector() method to leverage all CSS selectors, not just Id. I don't know what the recommended selector would be, but it could be something like

.esri-features__content-feature .header #close

LefterisKoumis

Thanks, I’ve already tried that.

Here’s the issue: I have a feature layer, and when a user clicks on a feature, the popup appears inside the Features widget on the left panel. If the user then clicks a tool on the left action bar—like the Basemap widget—it opens within the same Features widget panel. After that, if the user clicks on another feature, no popup appears, and the Features widget stays blank. However, I can still see the previous feature is still highlighted on the map.

What I’m trying to do is this: when a user clicks any widget in the action bar, I want to programmatically close the popup and clear the selection/highlight from the map before the new widget (e.g., Basemap) loads in the Features widget. That way, when a new feature is clicked, its popup loads normally.

I noticed that if I manually click the close button on the Features widget before selecting another widget from the action bar, everything works as expected. So, I want to simulate a click on that close button programmatically.

I already tried:

      view.popup.close();
      view.popup.selectedFeature = null;

featuresWidget.close()

LefterisKoumis

Thanks, but that approach won't work. You're suggesting the use of:

document.getElementById(<button id>).click()

However, the button ID is dynamically generated at runtime. For example, it looks like:

calcite-action-aa0a2d95-2dee-4f9d-4007-45da792b6f6e-button

This ID changes every time the FeatureWidget is initialized, making it unreliable to reference directly by ID.

Edvinas_S

Are you sure you need to simulate a click? If you want to close the widget, use .close() function, or you can set .visible to false.

Features | API Reference | ArcGIS Maps SDK for JavaScript 4.32 | Esri Developer

blake.terhune

The element.click() method should work. Maybe double check that your click event handler is functioning properly. Or maybe your selector isn't finding anything; try putting a console.log() in the if statement to confirm.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.