How can Experience Builder Custom widget become inactive when not clicked.

[QaziIqbal1]

I have created a custom widget that retrieves the information from a parcel layer when user clicks on the parcel. The issue I am facing is that when I switch to other widgets in the application (for example measurement) which requires clicking on the map, my custom widget is still active. It keeps on giving me the active state of both - Custom widget and Measurement widget.

I am trying to get the active state of widget. I am taking lot of help from AI softwares like chatGPT etc but it is always showing props.active as undefined. ChatGPT is suggesting that there may be problem in installation. I was working in developer edition 1.16 and now to resolve this issue, I reinstalled v 1.16 and still I am getting the same issue. 
I am sure lot of people may have created custom widgets and successfully made its functionality active only when the widget is in focus. I would appreciate if someone can proved me some help.

Here is the sample code of my test widget.tsx file

import { React, AllWidgetProps } from 'jimu-core';

const Widget = (props: AllWidgetProps<any>) => {

  console.log("Widget Mounted");

  console.log("Widget ID:", props.id);

  console.log("Is this widget active?", props.active ?? "Not provided");

  return (

    <div>

      <h3>Active Test Widget</h3>

      <p>Widget ID: {props.id}</p>

      <p>Is Active: {props.active ? "Yes" : "No"}</p>

    </div>

  );

};

export default Widget;

[JunshanLiu]

Hi @QaziIqbal1 For performance reason, we don't update the widget state by default, can you set this property to true to have a try? https://developers.arcgis.com/experience-builder/api-reference/jimu-core/WidgetManifestProperties/#n...

[QaziIqbal1]

I  added in manifest.json

 "needActiveState": true

Still i am seeing the same issue. I am going to attach the two files. widget.tsx and manifest.json. This is a simple test widget and you can test it by adding measurement widget with this in the application. 

I have consoled the message in onActiveViewChange function

onActiveViewChange = (jimuMapView: JimuMapView) => {

    this.view = jimuMapView.view as __esri.MapView;

    if (this.view) {

      this.isMapReady = true;

      console.log("Map view is ready. this.view:", this.view);

      console.log("props.active in onActiveViewChange:", this.props.active);

      // Force listener attachment for testing

      this.attachClickListener();

    } else {

      this.isMapReady = false;

      this.removeClickListener();

      console.log("Map view is NOT ready.");

    }

  };

The this.porps.active always shows undefined. 

Also I have included some console.log messages in componentDidUpdate function. It seems that componentDidUpdate lifecycle method is not being triggered.
I would appreciate if you can take look at the code at your end and see what I am doing wrong. 
Thanks
Qazi Iqbal

[JunshanLiu]

Hi @QaziIqbal1 There are two issues in your code:

1. The "needActiveState": true needs to be in the "properties"

2. Please use the "this.props.state" to read the state.

[QaziIqbal1]

 I sent you the complete test code. Please see if that works with you after making the changes. I tried the above solution, but it did not work.

[TimWestern]

I've been trying to picture this scenario.   I recently had a project where I had a custom widget put into a widget controller, and other widgets would stay open like search for example after the widget loaded from an action.  The one thing I noticed was the widget controller has this 'control' of Single vs multiple widgets opening

The other option could be, to create a custom action that closes the particular widget when another widget gets focused, and then have the action fire from the other widget to auto close the one that stays open.

I think there are some examples of that here in the community somewhere, I might have posted some sample code, b ut I don't 

This post talks about how to open another widget from one, I'm sure you could use a similar approach to close a widget also

https://community.esri.com/t5/arcgis-experience-builder-questions/open-widget-in-widget-controller/m...

[QaziIqbal1]

I really appreciate your help. I will look into it. For now I have used a different approach. 
I created a button that will enable it to respond to map click event only when button is clicked. Once user clicks on the map it returns the information and also disables it after one click. If user wants to get more information on another parcel, they will have to  click the activate button again and then click on map. 
This is a work around, but seems a solution.