Cannot get click event to fire in EB mobile device mode

Question

I am working on a custom widget for an EB Developer application and the on 'click' event won't fire when in mobile layout, but fires as expected in Desktop and Table layout. Each layout does have it's own map and I do have access to the map view in each case, so I don't think that is the issue. Also, nothing is blocking the map in mobile layout (verified in the Page outline) and I have popups enabled for the map.

jimuMapView.view.whenLayerView(cLayer).then((layerView) => {
 let highlight
 const mapDiv = document.getElementById("jimu-widget-a11y-widget_47")
 console.log("jimu map view ", jimuMapView) //this is defined 
 jimuMapView.view.on("click", function(evt) { 
  console.log("click zoom level ", jimuMapView.view.zoom)          
  let screenPoint = {
    x: evt.x,
    y: evt.y
  }          
  jimuMapView.view.hitTest(screenPoint, {include[cLayer]})
    .then(function(resp) {   
      console.log("Hello!")        
      const graphHits = resp.results?.filter(
       (hitResult) => hitResult.type === "graphic"
      );
      if(graphHits?.length > 0) {
        const county = graphHits[0].graphic.attributes.COUNTY
        if(county && currCounty !== county) {             
          if (jimuMapView.view.zoom >= 6 && jimuMapView.view.zoom < 8.5) { 
            highlight && highlight.remove();
            highlight = layerView.highlight(graphHits[0].graphic); 
            hoverCty.current = county  
            hoverGraph.current = graphHits[0].graphic          
            showLabel(county, screenPoint, mapDiv)
            } else {
              if(mapDiv.hasChildNodes() && mapDiv.childNodes.length > 1) {
                mapDiv.removeChild(mapDiv.childNodes[1])
              }
            }
            hoverCty.current = county          
          }              
         } else {
           if(mapDiv.hasChildNodes() && mapDiv.childNodes.length > 1) {
             mapDiv.removeChild(mapDiv.childNodes[1])
             hoverCty.current = ""
         }
         highlight && highlight.remove();
       }
    })
  })
})

FranklinAlexander · Answer

Yes, I am having a LOT of trouble getting the correct map widget id because no matter what map I have loaded, I seem to only be able to retrieve the id for the desktop version. I finally got it by using the 'onViewsCreate' property in the JimuMapViewComponent and still had to hard code the 'useMapWidgetId' property. As for point 2, so far I haven't had an issue manipulating the DOM element for the label, but I will take a another look. I assume I should be using a className or 'active' indicator instead and I did try that first, but found it to be a little tricky, but will keep trying.

JeffreyThompson2 · Answer

https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#hitTest

Try directly passing the ClickEvent, evt, into hitTest().

I don't think it's the cause of your problem, but I think you may have some issues with the way you are getting and altering the Map DOM node.

* You say you have multiple Map Widgets, each one will have a different widget_id number. * Actually, this might have something to do with your problem. Are you sure that you are putting the click event listener on the correct map? A map from a different screen size could still be defined in memory, but not accessible to the user.

* You are attempting to delete a DOM node through direct DOM manipulation. This will likely not work and the node will reappear after every re-render.