Trouble With Click Events to Display Popup 4.33

[JasonBartling1]

I am trying to manually open a popup when clicking on the map view, but the click events do not seem to be working quite as I am expecting.  It seems almost like my popup is getting closed before I can even see it.

This is my code: 

let viewElement = document.getElementById("map-component");
await viewElement.viewOnReady();
let view = viewElement.view;

view.on("click", (event)=>{

 view.openPopup({
        location: event.mapPoint,
        title: "You clicked here",
        content: "This is a point of interest"
    });
});

With immediate-click I do briefly see the popup and then it closes automatically.  Using the hold and double-click events, the popup does display and stays visible.  How do I get the popup to stay visible using a simple click event?

[ReneRubalcava · Accepted solution]

If you want to control the popup on click, you'll need to disable the popup first. If you don't do this, on click, the default popup behavior will win and can sometimes conflict with you trying to open it.

https://codepen.io/odoe/pen/ByjmyBb?editors=1000

  <arcgis-map item-id="45725ba7d9fb47a0925398919b13d1fa" popup-disabled>
  </arcgis-map>
  <script type="module">
    // Update code here
    const mapElement = document.querySelector("arcgis-map");
    mapElement.addEventListener("arcgisViewClick", (event) => {
      const {
        mapPoint
      } = event.detail;
      mapElement.openPopup({
        location: mapPoint,
        title: "You clicked here",
        content: "This is a point of interest"
      });
    });
  </script>

[JasonBartling1]

Thanks! That did the trick.