How are you hiding the dropdown window when the user clicks away from it?

[MonstrousOgre]

Continuing the discussion from #44. As mentioned, I currently use a button to both show and hide the window on my config. I'd love to be able to hide the window when I click away from it.

Thanks in advance!

[MonstrousOgre]

I just realized you answered this in the original thread. Nevermind lol. Thanks!

[MonstrousOgre]

@Jas-SinghFSU I copied the code for DropDownMenu.ts to my config but it doesn't seem to be working. I'm able to open the dropdown window but can't close it by clicking away. I'm also logging a message whenever either EventBox is clicked, and it looks like the "parent-event" box is not using up the entire screen. How are you making it use the entire screen? It works fine when I use your config.

I commented out the "moveBoxToCursor" line but didn't think it would be necessary for closing the window.

[Jas-SinghFSU]

I'd have to see the code to get an idea.

[MonstrousOgre]

@Jas-SinghFSU this is what my DropDownMenu.ts looks like. I pretty much copied your code. I'm opening the window using App.toggleWindow on the button click.

const initRender = Variable(true);

setTimeout(() => {
  initRender.value = false;
}, 2000);

export default ({
  name,
  child,
  layout = "center",
  transition,
  exclusivity = "ignore" as "normal" | "ignore" | "exclusive",
  fixed = false,
  ...props
}) =>
  Widget.Window({
    name,
    class_names: [name, "dropdown-menu"],
    setup: (w) => w.keybind("Escape", () => App.closeWindow(name)),
    visible: initRender.bind("value"),
    keymode: "on-demand",
    exclusivity,
    layer: "top",
    anchor: ["top", "left"],
    child: Widget.EventBox({
      class_name: "parent-event",
      on_primary_click: () => {
        console.log("clicked parent");
        App.closeWindow(name);
      },
      on_secondary_click: () => App.closeWindow(name),
      child: Widget.Box({
        class_name: "top-eb",
        vertical: true,
        children: [
          Widget.EventBox({
            class_name: "mid-eb event-top-padding",
            hexpand: true,
            vexpand: false,
            can_focus: false,
            child: Widget.Box(),
            setup: (w) => {
              w.on("button-press-event", () => App.toggleWindow(name));
              w.set_margin_top(1);
            },
          }),
          Widget.EventBox({
            class_name: "in-eb menu-event-box",
            on_primary_click: () => {
              console.log("clicked inner");

              return true;
            },
            on_secondary_click: () => {
              return true;
            },
            setup: (self) => {
              // moveBoxToCursor(self, fixed);
            },
            child: Widget.Box({
              class_name: "dropdown-menu-container",
              css: "padding: 1px; margin: -1px;",
              child: Widget.Revealer({
                revealChild: false,
                setup: (self) =>
                  self.hook(App, (_, wname, visible) => {
                    if (wname === name) self.reveal_child = visible;
                  }),
                transition: "crossfade",
                transitionDuration: 350,
                child: Widget.Box({
                  class_name: "dropdown-menu-container",
                  can_focus: true,
                  children: [child],
                }),
              }),
            }),
          }),
        ],
      }),
    }),
    ...props,
  });

[MonstrousOgre]

@Jas-SinghFSU I posted the code here but you can check MonstrousOgre /
temp_ags_config for more context

[MonstrousOgre]

Okay, so... I had commented the "moveBoxToCursor" line. Adding it and using the "openMenu" function rather than calling "App.toggleWindow" directly seems to have fixed it. I'm still not sure how it works but it does.

[Jas-SinghFSU]

Ah yea that's because the logic in the moveBoxToCursor actually sets the margins around the child eventbox. In other words, it fills the space around the menu to spawn the menu where it is which then allows the parent event pick that place up to register events.