4.x: hitTest firing both callback and errback

EllaHaines

I'm trying to use the HitTest() method to have one kind of popup whenever the user clicks on a feature, and another kind of popup when they click anywhere else on the map. However, the HitTest method seems to be firing both the callback AND the errback methods when I click on a feature, so it is showing the non-feature popup every time I click on a feature. How do I get it to do something only when the hit test fails?

I tested something similar in js bin, and it's doing the same thing when I use the popup function I'm trying to use, but not when I just had it print to the console for the errback instead. So maybe the problem is my AddPointGraphic function somehow. Am I using this wrongly somehow?

https://jsbin.com/jakumihuwa/1/edit?html,output

Just the view: https://output.jsbin.com/jakumihuwa/

//Why is it firing both the callback and errback?
var screenPoint = {
   x: event.x,
   y: event.y
}
view.hitTest(screenPoint).then(
   //callback
   function (response) {
      alert("hit")
}).otherwise(AddPointGraphic(event));

function AddPointGraphic(event) {
   //clear previous graphics
   view.graphics.removeAll();

   //create new graphic
   //console.log(event.mapPoint);
   var pointGeometry = event.mapPoint;

   var commentPointAtt = {
      long: event.mapPoint.longitude,
      lat: event.mapPoint.latitude
   }

   var commentPoint = new Graphic({
      geometry: pointGeometry,
      symbol: symbol,
      attributes: commentPointAtt,
      popupTemplate: commentPopupTemplate
   });
   view.graphics.add(commentPoint);
   view.popup.open({
      features: [commentPoint],
      location: event.mapPoint
   });
}

I tried using it in the hitTest(screenPoint).then(callback, errback) errback spot, but it did the same thing. I am new to 4.x and would appreciate any help.

ThomasSolow

The reason the .otherwise is always running is because you're invoking the function that you're passing into it:

view.hitTest(screenPoint).then(
   //callback
   function (response) {
      alert("hit")
}).otherwise(AddPointGraphic(event))

// ^ AddPointGraphic is being invoked because it 
// is followed by ().  

<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

.otherwise is like .then, you should pass in a function as an argument, but you shouldn't invoke the function.  It's also important to note that .otherwise will get passed the error, not the event.

To go a little further, .otherwise (.catch for native JS promises) is triggered in the event of an error or if the promise that it's attached to is rejected.  In this case, you don't want to do anything if hitTest throws an error.  HitTest throwing an error doesn't mean "I didn't find any graphics," it means "Something broke."

As in Robert's example, I think the correct way to handle this functionality is to handle all of this logic in the .then callback.  You can check to see if any graphics were found in the .then callback, and decide what to do based on that.