Clear Widget and Map on Close

[EMiller_2]

I have created a custom widget with input boxes which creates a graphic on a map. I have a "Trash Can" icon button on the widget which the user can hit to clear the map and all input info in the widget. This all works fine.

I would like to use the widget from the (out of the box) top widget ribbon, which allows for a nice icon button that opens and closes the widget. When the widget is open there is then also a "Close X" at the right top hand corner of the widget. 

My problem is that if the user closes the widget using the "X" or the ribbon icon button, the widget dialog box will close but it won't clear and the map won't clear (if the user hasn't hit the "Trash Can" button first). I would like closing the widget to function just like hitting the "Trash Can" button, but I can't see how to capture the closing event.

I have tried using componentWillUnmount and componentDidUpdate but I have not been successful.

I have already seen this post on the widget close event but it is not helping me out -- maybe someone can clarify or elaborate? 
https://community.esri.com/t5/arcgis-experience-builder-questions/widget-close-event/m-p/1040177/thr...

Thanks in advance!

[JeffreyThompson2]

Are you using class based or function based React components? I assume that you are using class based as componentWillUnmount and componetDidUpdate have been replaced by useEffect in function based React. Regardless, I believe the reason these methods did not work for you is that in Experience Builder widgets never actually unmount. They just hide when they are dismissed. (I am not 100% sure that is factual.) I did something like this in a class based component to watch if it was closed in a widget controller.

componentDidUpdate (prevProps) {
  if (prevProps.state === 'CLOSED') {
     return this.functionToRestartYourWidget()
  }
  if (this.props.state === 'CLOSED') {
    this.fuctionToCloseYourWidget()
  }
}

[EMiller_2 · Accepted solution]

Thanks Jeffrey! You put me on the right track -- I can't believe how simple the solution was. (Yes, it is a class based widget). All I did was this and it is working perfectly now. Hopefully I'm not overlooking something but this did the trick:

componentDidUpdate () {
    if (this.props.state === 'CLOSED') {
      console.log("I'm closed!")
      this.myWidget.clear();
      this.mydrawLayer.removeAll();
      this.setState({
        inputText: "",    
      });
    }

[SupakornAngaumnuaysiri1]

@EMiller_2 Where does insert this code? File in Server or Client.

[JeffreyThompson2]

This code would go within the widget.tsx of a class based widget.

[SupakornAngaumnuaysiri1]

Thanks for your reply.