topic Re: Cannot trigger headerActions with the arcgis-features map component in ArcGIS JavaScript Maps SDK Questions

Cannot trigger headerActions with the arcgis-features map component

FrValade1 — Thu, 10 Jul 2025 14:29:19 GMT

I'm using the arcgis-features map component in a react application and I'm able to add an action button in the header. Now the problem is that the "onarcgisTriggerAction" event handler is never fired when I click on the action button. Is this a bug?

Here's my code :

const [actionDetacherInformations] = useState(new Collection([new ActionButton({icon:"popup", title:"Détacher", id:"detacher",type:"button"})])); <arcgis-features onarcgisTriggerAction={e => { if(e.detail.action.id === "detacher"){ setPopupDockEnabled(false); } }} headerActions={actionDetacherInformations} referenceElement={mapId}>

Re: Cannot trigger headerActions with the arcgis-features map component

LaurenBoyd — Thu, 10 Jul 2025 21:51:13 GMT

Hi @FrValade1 -

Right now, the `trigger-action` event only covers the actions in the action bar. This doesn't include the header actions. We will look into updating the `trigger-action` event to fire when `headerActions` are triggered as well.

Could you provide more information on your use case for adding a custom headerAction? Looks like you may be creating a dock button for the Features component?

Re: Cannot trigger headerActions with the arcgis-features map component

FrValade1 — Fri, 11 Jul 2025 15:34:50 GMT

I wanted to add a dock button to the header and I thought that the `trigger-action` event would be triggered since the headerActions property was available in the component. Also, I noticed that once I close the features component by using the default close button, I can't open or fetch features anymore because of an error :

Finally, I resolved my problem by hiding the header with the hideHeading and hideCloseButton properties and wrapping the arcgis-features component inside a calcite-flow-item with a header and custom actions. I replaced the close button with a custom action that change the closed property on the component. By doing it this way, there was no more problems with the fetchFeatures promise.

<calcite-flow> <calcite-flow-item closed={!popupDockEnabled || popupAucunResultat} selected heading={titreFeatures ?? undefined}> <calcite-action text="Afficher dans la carte" title="Afficher dans la carte" slot="header-actions-end" icon="popup" onClick={async () => { setPopupDockEnabled(false); await arcgisMapRef.current?.view.openPopup({ features: featuresRef.current?.features }) if (arcgisMapRef.current?.view.popup) { while (arcgisMapRef.current.view.popup.selectedFeatureIndex !== featuresRef.current?.selectedFeatureIndex) { arcgisMapRef.current.view.popup.next(); } } } }> </calcite-action> <calcite-action text="Fermer" title="Fermer" slot="header-actions-end" icon="x" onClick={() => { setPopupAucunResultat(true); } }> </calcite-action> <arcgis-features ref={featuresRef} onarcgisReady={() => setFeaturesRefReady(true)} hideHeading hideCloseButton closed={!popupDockEnabled || popupAucunResultat} referenceElement={mapId}> </arcgis-features> </calcite-flow-item> </calcite-flow>