Setting a variable while closing a panel in Javascript

Hello, does anybody know the best way to set an L: variable when a toolbar
panel is closed by clicking the X icon ? I tried this method first, adding a
listener in the connectedCallback():

this.ingameUi.addEventListener("panelInactive", (e) =>
{
  SimVar.SetSimVarValue("L:MyVariable", "number", 1);
}

Putting a breakpoint with the Coherent Debugge, this code never gets executed,
but the other listener for the “panelActive” breaks just fine. I tried to use
the disconnectedCallback(), it’s never executed too:

disconnectedCallback()
{
  SimVar.SetSimVarValue("L:MyVariable", "number", 1);
}

The only thing that works, is intercepting a click event on the close icon
itself, the following code WORKS, the code executes but, the variable is not
set, it seems the when its closing, something related to the SimVar framework,
even it it can be traced with the debugger, is not able to set the variable.
Any ideas why ?

this.close_icon = document.getElementsByClassName("Close nodrag")[0];
this.close_icon.addEventListener("click", (e) =>
{
  SimVar.SetSimVarValue("L:MyVariable", "number", 1);
}

I think the Simvar code loads and unloads in a strange way when it comes to
the panels. It would be good to know how Simvar.JS is loaded and unloaded with
regard panel code (and have wider documentation of course) I had to put my
code behind a 1 second delay onload int eh connectedCallback otherwise I
couldn’t access any simvar variable. Thinking about it could you use
event.preventDefault(); to stop the closing then close via JS after you set
the variable?

Bumping this one, as DisconnectedCallback never gets called, Is there a
special situation for this to be called, even in a javascript gauge.

Hello @virtuali @DA40CGDFQ @CaptMatto I talked with a dev bout this subject,
The view is destroyed immediately when we close the panel, so there is no way
to define a Simvar during this time. For that, the view should exist for one
more frame but it’s not the case for the moment. However, one solution would
be, as CaptMatto suggests, to bypass the click and avoid the “normal” panel
output by using a custom function and include a delay to ensure that the
Simvar has the new value. The code could be something like this (non tested) :

//you might already have a reference to it somewhere else ?
const ingameUI = document.querySelector("ingame-ui");
// prevents the normal click code from functioning
this.close_icon.Validate = () => {};

this.close_icon.addEventListener("click", (e) => {
    SimVar.SetSimVarValue("L:MyVariable", "number", 1).then(() => {
        ingameUI.closePanel();
    });
});

Also, DisconnectedCallback is called when the element is removed from the DOM.
In fact, when the view is deleted, the whole view is deleted at once, not just
the elements it contains. When loading, SimVar are not available immediately
for some reasons. The best solution is to use SimVar.IsReady() which returns a
boolean but you will have to call it for each frame with setInterval or
requestAnimationFrame until the function returns True. I hope it helps,
Regards, Boris

Thank you, I’ll look into that.