topic Re: Popup close and collapse buttons do not respond to mouse events. in ArcGIS JavaScript Maps SDK Questions

Popup close and collapse buttons do not respond to mouse events.

PavanMungara — Mon, 20 May 2024 19:30:05 GMT

I have @ArcGIS/code Version 4.29.10 loaded into my React PWA app. The primary functionality is to display base layers, graphics, and/or feature layers, with some layers having popup templates enabled.

Recently, our customers have reported issues with the popup not closing when clicked. Upon investigation, I noticed that both the close and collapse buttons do not respond to mouse events, although other buttons on the popup work fine.

However, they work fine with taps on touch-enabled devices like iPads, as well as with keyboard events. This functionality was operating correctly at some point. How can I troubleshoot this issue?

Note: This appears to be an issue only on Chrome and Edge browsers. It works fine on Firefox.

Re: Popup close and collapse buttons do not respond to mouse events.

AndyGup — Mon, 20 May 2024 19:48:36 GMT

Hi @PavanMungara, please provide a minimum reproducible application, more details on how to do this are available here: https://developers.arcgis.com/javascript/latest/troubleshooting/#minimal-reproducible-application.

Re: Popup close and collapse buttons do not respond to mouse events.

emreaktas1 — Thu, 23 May 2024 14:15:19 GMT

hi @PavanMungara

How to add a button in a popup window. Can you help

Re: Popup close and collapse buttons do not respond to mouse events.

PavanMungara — Fri, 24 May 2024 21:11:26 GMT

@emreaktas1 Check this example:

Popup actions | Sample Code | ArcGIS Maps SDK for JavaScript 4.29 | ArcGIS Developers

Re: Popup close and collapse buttons do not respond to mouse events.

PavanMungara — Tue, 28 May 2024 07:12:31 GMT

@AndyGup
I believe the issue is due to other libraries I am using in my project. I've created a minimal reproducible application; please let me know if you have any questions.

npmun/react-navigation-drawer-arcgis (github.com)

yarn install yarn run start

Click on the map to open the pop-up, and you will notice that the close button does not work.

Re: Popup close and collapse buttons do not respond to mouse events.

AndyGup — Tue, 28 May 2024 16:32:25 GMT

> I believe the issue is due to other libraries I am using in my project

@PavanMungara agreed, without more information this doesn't seem to be an issue with the ArcGIS JS SDK. I wasn't able to repro your popup issue using our minimum React sample here: https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-react. I recommend you start with our minimal sample app and experiment with adding/removing 3rd party functionality until you can isolate this issue.

Re: Popup close and collapse buttons do not respond to mouse events.

PavanMungara — Thu, 30 May 2024 01:38:20 GMT

@AndyGup The Issue happens when the map component is added to one of the react-navigation drawer routes (@react-navigation/drawer - npm (npmjs.com))

It works okay when it is part of other routes like stack, tab...etc. Everything else works on the map except for the popup close and collapse buttons. Can you give some hints on what could be the issue here?

Re: Popup close and collapse buttons do not respond to mouse events.

AndyGup — Fri, 31 May 2024 18:48:02 GMT

@PavanMungaramy best guess without a repro sample that isolates the issue is this might be related to the click event handling in React or react-navigation/drawer. You could try researching issues in https://github.com/react-navigation/react-navigation.

Re: Popup close and collapse buttons do not respond to mouse events.

PavanMungara — Sat, 01 Jun 2024 06:19:23 GMT

@AndyGup I already created repro project, here it is…

https://github.com/npmun/react-navigation-drawer-arcgis

Re: Popup close and collapse buttons do not respond to mouse events.

AndyGup — Thu, 06 Jun 2024 15:20:36 GMT

@PavanMungaraI was able to reproduce the issue in your project, but I don't know what's causing it. I recommend coming at the problem from another direction. Start with a very basic, hello world React install with minimal dependencies, and then add functionality one at a time until it breaks. For example, when looking at your repro project, the package.json has 17 dependencies and 37 devDependencies. In comparison, the SDK's React sample has 3 dependencies, 4 devDependencies and no babel config or config overrides which makes it a better starting point for isolating issues.

Re: Popup close and collapse buttons do not respond to mouse events.

PavanMungara — Wed, 02 Oct 2024 19:22:34 GMT

This is likely the issue relkated to the @react-navigation/drawer package.