Select to view content in your preferred language

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

412
9
3 weeks ago
PavanMungara
New Contributor

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.

 
PavanMungara_0-1716229976424.png

 

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.

0 Kudos
9 Replies
AndyGup
Esri Regular Contributor

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

0 Kudos
PavanMungara
New Contributor

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

0 Kudos
AndyGup
Esri Regular Contributor

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

0 Kudos
PavanMungara
New Contributor

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

0 Kudos
AndyGup
Esri Regular Contributor

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

0 Kudos
PavanMungara
New Contributor

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

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

0 Kudos
AndyGup
Esri Regular Contributor

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

0 Kudos
emreaktas1
New Contributor II

hi @PavanMungara 

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

0 Kudos