custom function on X button

[SurajJha1]

Hi, I want to write my own function on click of cross (X) button of esri popup using ArcGIS API for javascrpt 4.x.

If you have ideas of sample about it, please share.

Thanks in advance

[DavidWilson3]

Hi Suraj,

Here is something quick I wrote up that creates an action for the "X" Esri close icon and allows you to have a trigger function associated with it. I also recommend you to take a look at the documentation of the esri/widgets/popup class to help you further: Popup | ArcGIS API for JavaScript 4.11 

// Defines an action
var exampleAction = {
 // This text is displayed as a tooltip
 title: "Example Action",
 // The ID used to reference this action in the event handler
 id: "example-action",
 // Sets the icon font used to style the action button
 className: "esri-popup__icon esri-icon-close"
};
// Adds the custom action to the popup
view.popup.actions.push(exampleAction);

// Fires each time an action is clicked
view.popup.on("trigger-action"), function(event){
 // If the example-action action is clicked, than execute the following code
 if(event.action.id === "example-action"){
 // Your custom code....
 }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[SurajJha1]

Thanks David, It is really helpful. but my requirement is to change the behavior of default esri popup X button.

If you have any idea please share.

[DavidWilson3]

Suraj,

I see, well keep in mind that the "default" esri popup x button is just a generic div button with a class of "esri-popup__button" and they just make the aria-label and title of it "Close". Perhaps try looking into assigning an id to it so you can do stuff to it in your script or try and use something like my example and replace the default with it.

[rogenjh]

This feels like a ridiculous solution and many of the people here are much smarter than me at this stuff - but I have a specific use case where I need to listen on the click of X vs the popup closing. Maybe some folks can iterate and make it better.

      watchUtils.whenTrue(this.view.popup, 'visible', () => {

        setTimeout(() => {

          const closeBtn = query('.esri-popup__button');

          if (closeBtn[0]) {

            on(closeBtn[0], 'click', () => {

              this.popupClosed();

            });

          }

        }, 1000);

      });