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

[PavanMungara]

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.

[AndyGup]

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. 

[PavanMungara]

@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.

[AndyGup]

> 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.

[PavanMungara]

@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? 

[AndyGup]

@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.

[PavanMungara]

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

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

[AndyGup · Accepted solution]

@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.

[PavanMungara]

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

[emreaktas1]

hi @PavanMungara 

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