How to correctly handle widget destoryment

[A7R7]

I have implemented a right click menu to view hyprland client infos.

The code snippet that functions is as follows

on_secondary_click: (_, event) => {
    const MenuItems = [];
    for (const key in client) {
        MenuItems.push(Widget.MenuItem({
            child: Widget.Label({
                hpack: 'start',
                label: `${key} : ${client[key]}`,
            }),
            on_activate: () => Utils.execAsync(`wl-copy ${client[key]}`),
        }))
    }
    return Widget.Menu({children: MenuItems,}).popup_at_pointer(event)
},

However, when the menu is closed, after a while some critical warnings got printed

(com.github.Aylur.ags:466556): Gjs-CRITICAL **: 14:23:13.491: Attempting to call back into JSAPI during the sweeping phase of GC. This is most likely caused by not destroying a Clutter actor or Gtk+ widget with ::destroy signals connected, but can also be caused by using the destroy(), dispose(), or remove() vfuncs. Because it would crash the application, it has been blocked and the JS callback not invoked.
The offending signal was destroy on Ags_MenuItem 0x182cce0.
== Stack trace for context 0x1730340 ==
#0        17f8988 i   resource:///org/gnome/gjs/modules/core/overrides/GLib.js:266 (28a477b7c420 @ 139)

(com.github.Aylur.ags:466556): Gjs-CRITICAL **: 14:23:13.491: Attempting to call back into JSAPI during the sweeping phase of GC. This is most likely caused by not destroying a Clutter actor or Gtk+ widget with ::destroy signals connected, but can also be caused by using the destroy(), dispose(), or remove() vfuncs. Because it would crash the application, it has been blocked and the JS callback not invoked.
The offending signal was destroy on Ags_Label 0x182c9f0.
== Stack trace for context 0x1730340 ==
#0        17f8988 i   resource:///org/gnome/gjs/modules/core/overrides/GLib.js:266 (28a477b7c420 @ 139)

I guess that there's something inappropriate in my code. How to correctly handle this?

[Aylur]

you can either keep a reference to the menu and reuse it, or destroy it explicitly after it closes

// keep a reference
function EventBox() {
    const menu = Widget.Menu()

    return Widget.EventBox({
        on_secondary_click: (_, event) => {
            menu.popup_at_pointer(event)
        },
    })
}

// destroy explicitly
on_secondary_click: (_, event) => {
    return Widget.Menu()
        .on("notify::visible", (self) => {
            if (!self.visible)
                self.destroy()
        })
        .popup_at_pointer(event)
},

[A7R7]

Thank you, saved my day! The second approach solve the problem.
I guess the first approach failed (have the same gc error) because the eventbox itself is also dynamically generated.

Meanwhile, there's another problem, since it's in the same code snippet, I'll just raise it here.

Widget.MenuItem({
  ...
  on_activate: () => Utils.execAsync(`wl-copy ${client[key]}`),
  ...
})

This doesn't seems to work. I have looked into your dotfiles to find examples, and especially went through the colorpicker part, and found that there's a // TODO: doesn't work? comment above the wlCopy() method, which is exactly what I want to have. Is it because on_activate: have some bugs?

[Aylur]

no, I think its an issue with wl-copy or something else. It doesn't quit as expected, but I couldn't figure it out yet why
I had this same issue when using eww, for whatever reason wl-copy only exits and copies the value, when its run again, so its always one wlCopy call behind