How to access a lower feature layer's popup on click?

[KimC]

Hi everyone!

Context

ArcGIS JavaScript API 4.7
I have a feature layer (A) made from client-side graphics. On top of this feature layer, there exists another feature layer (B) made of graphics using a picture fill symbol. Layer B contains no data, but is simply used to overlay a photo on top of layer A.

Problem

When clicking on areas where both layers overlap, the popup of the higher layer's popup (B) is being triggered. Is there any way to access the lower layer's (A) popup?

Any advice or input is greatly appreciated!

[KimC]

Solution

I ended up solving my own problem by using hitTest() on a map click event and checking if it hit layer A. When layer A was hit, I would get the graphic from HitTestResult's results array and display its popup. Here's an adapted version of the code in case someone else has the same problem.

view.on("click", function (event) {
    event.stopPropagation();
    var htr; // a single result from HitTestResult results[]
    view.hitTest(event)
        .then(function (response) {
            if (response.results.length){
                htr = response.results.filter(function (result) {
                    return result.graphic.layer === layerA;
                })[0];‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
                if (htr !== undefined){
                    var arr = [];
                    arr.push(htr.graphic);
                    view.popup.open({
                        location: htr.mapPoint,
                        features: arr 
                    });
                }
            }
        });
});    ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I also found this sample code helpful: ArcGIS API for JavaScript Sandbox 

I'm fairly new to ArcGIS and JavaScript, so feel free to let me know if there are any improvements to be made. I do not know if this is the best solution, however, it worked for me. Hopefully, this helps someone!