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>
This commit is contained in:
davfsa
2025-06-14 23:14:58 +02:00
committed by GitHub
parent bfd47dd853
commit 6870dc71cd

View File

@@ -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>
);
};