From 6870dc71cd8a6514209c0808fd03330585d4d314 Mon Sep 17 00:00:00 2001
From: davfsa <davfsa@gmail.com>
Date: Sat, 14 Jun 2025 23:14:58 +0200
Subject: [PATCH] fix: close dropdown menu when focus lost (#986)

* fix: close dropdown menu when focus lost

Signed-off-by: davfsa <davfsa@gmail.com>

* fix: shadow var name to avoid unused lint

Signed-off-by: davfsa <davfsa@gmail.com>

* fix: remove unused argument

Signed-off-by: davfsa <davfsa@gmail.com>

---------

Signed-off-by: davfsa <davfsa@gmail.com>
Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
---
 .../menus/shared/dropdown/index.tsx           | 116 +++++++++---------
 1 file changed, 56 insertions(+), 60 deletions(-)

diff --git a/src/components/menus/shared/dropdown/index.tsx b/src/components/menus/shared/dropdown/index.tsx
index f594930..f8b2b7d 100644
--- a/src/components/menus/shared/dropdown/index.tsx
+++ b/src/components/menus/shared/dropdown/index.tsx
@@ -25,11 +25,21 @@ export default ({
             name={name}
             namespace={name}
             className={`${name} dropdown-menu`}
-            onKeyPressEvent={(_, event) => {
+            onKeyPressEvent={(self, event) => {
                 const key = event.get_keyval()[1];
 
                 if (key === Gdk.KEY_Escape) {
-                    App.get_window(name)?.set_visible(false);
+                    self.visible = false;
+                }
+            }}
+            onFocusOutEvent={(self) => {
+                self.visible = false;
+            }}
+            onButtonPressEvent={(self, event) => {
+                const buttonClicked = event.get_button()[1];
+
+                if (buttonClicked === Gdk.BUTTON_PRIMARY || buttonClicked === Gdk.BUTTON_SECONDARY) {
+                    self.visible = false;
                 }
             }}
             visible={false}
@@ -48,67 +58,53 @@ export default ({
             })}
             {...props}
         >
-            <eventbox
-                className="parent-event"
-                onButtonPressEvent={(_, event) => {
-                    const buttonClicked = event.get_button()[1];
-
-                    if (buttonClicked === Gdk.BUTTON_PRIMARY || buttonClicked === Gdk.BUTTON_SECONDARY) {
-                        App.get_window(name)?.set_visible(false);
+            <box vertical>
+                {bind(location).as((lcn) => {
+                    if (locationMap[lcn] === Astal.WindowAnchor.TOP) {
+                        return <BarEventMargins windowName={name} />;
                     }
-                }}
-            >
-                <box className="top-eb" vertical>
-                    {bind(location).as((lcn) => {
-                        if (locationMap[lcn] === Astal.WindowAnchor.TOP) {
-                            return <BarEventMargins windowName={name} />;
-                        }
-                        return <box />;
-                    })}
-                    <eventbox
-                        className="in-eb menu-event-box"
-                        onButtonPressEvent={(_, event) => {
-                            const buttonClicked = event.get_button()[1];
+                    return <box />;
+                })}
+                <eventbox
+                    className="in-eb menu-event-box"
+                    onButtonPressEvent={(_, event) => {
+                        const buttonClicked = event.get_button()[1];
 
-                            if (
-                                buttonClicked === Gdk.BUTTON_PRIMARY ||
-                                buttonClicked === Gdk.BUTTON_SECONDARY
-                            ) {
-                                return true;
-                            }
-                        }}
-                        setup={(self) => {
-                            globalEventBoxes.set({
-                                ...globalEventBoxes.get(),
-                                [name]: self,
-                            });
-                        }}
-                    >
-                        <box className="dropdown-menu-container" css="padding: 1px; margin: -1px;">
-                            <revealer
-                                revealChild={false}
-                                setup={(self: Revealer) => {
-                                    App.connect('window-toggled', (_, window) => {
-                                        self.set_reveal_child(window.visible);
-                                    });
-                                }}
-                                transitionType={transition}
-                                transitionDuration={bind(options.menus.transitionTime)}
-                            >
-                                <box className="dropdown-content" halign={Gtk.Align.CENTER} expand canFocus>
-                                    {child}
-                                </box>
-                            </revealer>
-                        </box>
-                    </eventbox>
-                    {bind(location).as((lcn) => {
-                        if (locationMap[lcn] === Astal.WindowAnchor.BOTTOM) {
-                            return <BarEventMargins windowName={name} />;
+                        if (buttonClicked === Gdk.BUTTON_PRIMARY || buttonClicked === Gdk.BUTTON_SECONDARY) {
+                            return true;
                         }
-                        return <box />;
-                    })}
-                </box>
-            </eventbox>
+                    }}
+                    setup={(self) => {
+                        globalEventBoxes.set({
+                            ...globalEventBoxes.get(),
+                            [name]: self,
+                        });
+                    }}
+                >
+                    <box className="dropdown-menu-container" css="padding: 1px; margin: -1px;">
+                        <revealer
+                            revealChild={false}
+                            setup={(self: Revealer) => {
+                                App.connect('window-toggled', (_, window) => {
+                                    self.set_reveal_child(window.visible);
+                                });
+                            }}
+                            transitionType={transition}
+                            transitionDuration={bind(options.menus.transitionTime)}
+                        >
+                            <box className="dropdown-content" halign={Gtk.Align.CENTER} expand canFocus>
+                                {child}
+                            </box>
+                        </revealer>
+                    </box>
+                </eventbox>
+                {bind(location).as((lcn) => {
+                    if (locationMap[lcn] === Astal.WindowAnchor.BOTTOM) {
+                        return <BarEventMargins windowName={name} />;
+                    }
+                    return <box />;
+                })}
+            </box>
         </window>
     );
 };