[GH-ISSUE #900] Popup remains open when navigating to another item on the bar #5896

New issue

Closed

opened 2026-05-23 01:53:54 +01:00 by JakeStanger · 1 comment

JakeStanger commented

2026-05-23 01:53:54 +01:00

Owner

Originally created by @krims0n32 on GitHub (Mar 14, 2025).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/900

Describe the bug
When opening a popup and navigating to another widget the popup remains open, even when clicking outside the bar.

To Reproduce
Steps to reproduce the behavior:

Click on a widget that has a popup (volume, player, etc.)
Do not hover into the popup
Navigate to another item on the bar (doesn't need to have a popup as well)
When you move the mouse out of the bar the popup remains open, even after a mouseclick
Only after you enter the widget that owns the popup or entering the popup and leaving it the popup disappears

Expected behavior

Popup should always close when navigating to another item or clicking outside, etc.

System information:

Distro: Arch Linux
Compositor: Wayfire
ironbar-git 0.16.1.r167.g9c7a562-1

Configuration

Share your bar configuration and stylesheet as applicable:

Config

let {
$focused = {
type = "focused"
icon_size = 20
truncate = {
mode = "end"
max_length = 30
}
}

$launcher = {
    type = "launcher"
    show_names = false
    show_icons = true
    icon_size = 24
    truncate = {
        mode = "end"
        max_length = 36
    }
}

$mpris = {
    type = "music"
    player_type = "mpris"

    on_click_middle = "playerctl play-pause"
}

$notifications = {
    type = "notifications"
    show_count = true

    icons.closed_none = "󰍥"
    icons.closed_some = "󱥂"
    icons.closed_dnd = "󱅯"
    icons.open_none = "󰍡"
    icons.open_some = "󱥁"
    icons.open_dnd = "󱅮"
}

$tray = {
    type = "tray"
    icon_size = 36
}

$clock = { type = "clock" }

$clipboard = { type = "clipboard" max_items = 5 truncate.mode = "end" truncate.length = 50 }

$volume = {
    type = "volume"
    format = "{icon} {:percentage}%"
    max_volume = 100
    icons.volume_high = "󰕾"
    icons.volume_medium = "󰖀"
    icons.volume_low = "󰕿"
    icons.muted = "󰝟"
    on_scroll_up = "wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%+"
    on_scroll_down = "wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%-"
    on_click_right = "wpctl set-mute @DEFAULT_AUDIO_SINK@ toggle"
}

$label = { type = "label" label = "random num: {{500:echo FIXME}}" }

// -- begin custom --
$button = { type = "button" name="power-btn" label = "" on_click = "popup:toggle" }

$popup = {
    type = "box"
    orientation = "vertical"
    widgets = [
        { type = "label" name = "header" label = "Power menu" }
        {
            type = "box"
            widgets = [
                { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!shutdown now" }
                { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!reboot" }
            ]
        }
        { type = "label" name = "uptime" label = "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}" }
    ]
}

$power_menu = {
    type = "custom"
    class = "power-menu"

    bar = [ $button ]
    popup = [ $popup ]

    tooltip = "Up: {{30000:uptime -p | cut -d ' ' -f2-}}"
}
// -- end custom --

$left = [ $focused ]
$right = [ $tray $volume $clipboard $mpris $clock ]

}

in {
anchor_to_edges = true
position = "top"
height = 40
icon_theme = "breeze-dark"

start = $left
end = $right

}

Styles

define-color color_bg rgba(20, 20, 20, 0.1);
@define-color color_bg_dark rgba(10, 10, 10, 0.5);
@define-color color_fg rgba(20, 20, 20, 0.9);
@define-color color_border #424242;
@define-color color_border_active #6699cc;
@define-color color_text #ffffff;
@define-color color_urgent #8f0a0a;

/* -- base styles -- */

* {
    background-color: transparent;
    font-family: "Noto Sans", sans-serif;
    font-size: 11px;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    outline: none;
}

box, menubar, button {
    border: none;
    padding: 0px;
    /* background-color: rgba(20, 20, 20, 0.1); */
    /* background-color: red; */
    background-image: none;
    box-shadow: none;
}

button, label {
    color: @color_text;
}

button:hover {
    background-color: @color_bg_dark;
}

scale trough {
    min-width: 1px;
    min-height: 2px;
}

#bar {
    margin: 4px;
    background-image: none;
}

.widget {
    padding: 0px 10px;
}

.popup {
    background-color: @color_bg_dark;
    border: 1px solid @color_border;
    padding: 1em;
}

/* .popup .item:hover {
    color: red;
    background-color: red;
} */

.focused {
    background-color: @color_bg;
    border-radius: 5px;
}

.focused .label {
    color: @color_fg;
}


/* -- clipboard -- */

.clipboard {
    margin-left: 5px;
    font-size: 1.2em;
}

.popup-clipboard .item {
    padding-bottom: 0.3em;
    border-bottom: 1px solid @color_border;
}


/* -- clock -- */

.clock {
    font-weight: bold;
    margin-left: 5px;
}

.popup-clock .calendar-clock {
    color: @color_text;
    font-size: 2.5em;
    padding-bottom: 0.1em;
}

.popup-clock .calendar {
    background-color: @color_bg;
    color: @color_text;
}

.popup-clock .calendar .header {
    padding-top: 1em;
    border-top: 1px solid @color_border;
    font-size: 1.5em;
}

.popup-clock .calendar:selected {
    background-color: @color_border_active;
}


/* -- launcher -- */

.launcher {
    background-color: @color_bg;
    border-radius: 5px;
}

.launcher .item {
    margin-right: 4px;
}

.launcher .ifix examtem:not(.focused):hover {
    background-color: @color_bg_dark;
}

.launcher .open {
    border-bottom: 1px solid @color_text;
}

.launcher .focused {
    border-bottom: 1px solid @color_border_active;
}

.launcher .urgent {
    border-bottom-color: @color_urgent;
}

.popup-launcher {
    padding: 0;
}

.popup-launcher .popup-item:not(:first-child) {
    border-top: 1px solid @color_border;
}


/* -- music -- */

.music:hover * {
    background-color: @color_bg_dark;
}

.popup-music .album-art {
    margin-right: 1em;
}

.popup-music .icon-box {
    margin-right: 0.4em;
}

.popup-music .title .icon, .popup-music .title .label {
    font-size: 1.7em;
}

.popup-music .controls *:disabled {
    color: @color_border;
}

.popup-music .volume .slider slider {
    border-radius: 100%;
}

.popup-music .volume .icon {
    margin-left: 4px;
}

.popup-music .progress .slider slider {
    border-radius: 100%;
}

/* notifications */

.notifications .count {
    font-size: 0.6rem;
    background-color: @color_text;
    color: @color_bg;
    border-radius: 100%;
    margin-right: 3px;
    margin-top: 3px;
    padding-left: 4px;
    padding-right: 4px;
    opacity: 0.7;
}

/* -- script -- */

.script {
    padding-left: 10px;
}


/* -- sys_info -- */

.sysinfo {
    margin-left: 10px;
}

.sysinfo .item {
    margin-left: 5px;
}


/* -- tray -- */

.tray {
    background: @color_bg_dark;
    border-radius: 5px;
    margin-left: 10px;
}

/* -- volume -- */

.popup-volume .device-box {
    border-right: 1px solid @color_border;
}

/* -- workspaces -- */

.workspaces .item.focused {
    box-shadow: inset 0 -3px;
    background-color: @color_bg_dark;
}

.workspaces .item.urgent {
    background-color: @color_urgent;
}

.workspaces .item:hover {
    box-shadow: inset 0 -3px;
}


/* -- custom: power menu -- */

.popup-power-menu #header {
    font-size: 1.4em;
    padding-bottom: 0.4em;
    margin-bottom: 0.6em;
    border-bottom: 1px solid @color_border;
}

.popup-power-menu .power-btn {
    border: 1px solid @color_border;
    padding: 0.6em 1em;
}

.popup-power-menu #buttons > *:nth-child(1) .power-btn {
    margin-right: 1em;
}

Originally created by @krims0n32 on GitHub (Mar 14, 2025). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/900 **Describe the bug** When opening a popup and navigating to another widget the popup remains open, even when clicking outside the bar. **To Reproduce** Steps to reproduce the behavior: 1. Click on a widget that has a popup (volume, player, etc.) 2. Do not hover into the popup 3. Navigate to another item on the bar (doesn't need to have a popup as well) 4. When you move the mouse out of the bar the popup remains open, even after a mouseclick 5. Only after you enter the widget that owns the popup or entering the popup and leaving it the popup disappears **Expected behavior** > Popup should always close when navigating to another item or clicking outside, etc. **System information:** - Distro: Arch Linux - Compositor: Wayfire - ironbar-git 0.16.1.r167.g9c7a562-1 **Configuration** > Share your bar configuration and stylesheet as applicable: <details><summary>Config</summary> let { $focused = { type = "focused" icon_size = 20 truncate = { mode = "end" max_length = 30 } } $launcher = { type = "launcher" show_names = false show_icons = true icon_size = 24 truncate = { mode = "end" max_length = 36 } } $mpris = { type = "music" player_type = "mpris" on_click_middle = "playerctl play-pause" } $notifications = { type = "notifications" show_count = true icons.closed_none = "󰍥" icons.closed_some = "󱥂" icons.closed_dnd = "󱅯" icons.open_none = "󰍡" icons.open_some = "󱥁" icons.open_dnd = "󱅮" } $tray = { type = "tray" icon_size = 36 } $clock = { type = "clock" } $clipboard = { type = "clipboard" max_items = 5 truncate.mode = "end" truncate.length = 50 } $volume = { type = "volume" format = "{icon} {:percentage}%" max_volume = 100 icons.volume_high = "󰕾" icons.volume_medium = "󰖀" icons.volume_low = "󰕿" icons.muted = "󰝟" on_scroll_up = "wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%+" on_scroll_down = "wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%-" on_click_right = "wpctl set-mute @DEFAULT_AUDIO_SINK@ toggle" } $label = { type = "label" label = "random num: {{500:echo FIXME}}" } // -- begin custom -- $button = { type = "button" name="power-btn" label = "" on_click = "popup:toggle" } $popup = { type = "box" orientation = "vertical" widgets = [ { type = "label" name = "header" label = "Power menu" } { type = "box" widgets = [ { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!shutdown now" } { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!reboot" } ] } { type = "label" name = "uptime" label = "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}" } ] } $power_menu = { type = "custom" class = "power-menu" bar = [ $button ] popup = [ $popup ] tooltip = "Up: {{30000:uptime -p | cut -d ' ' -f2-}}" } // -- end custom -- $left = [ $focused ] $right = [ $tray $volume $clipboard $mpris $clock ] } in { anchor_to_edges = true position = "top" height = 40 icon_theme = "breeze-dark" start = $left end = $right } </details> <details><summary>Styles</summary> ```css define-color color_bg rgba(20, 20, 20, 0.1); @define-color color_bg_dark rgba(10, 10, 10, 0.5); @define-color color_fg rgba(20, 20, 20, 0.9); @define-color color_border #424242; @define-color color_border_active #6699cc; @define-color color_text #ffffff; @define-color color_urgent #8f0a0a; /* -- base styles -- */ * { background-color: transparent; font-family: "Noto Sans", sans-serif; font-size: 11px; border: none; border-radius: 0; padding: 0; margin: 0; outline: none; } box, menubar, button { border: none; padding: 0px; /* background-color: rgba(20, 20, 20, 0.1); */ /* background-color: red; */ background-image: none; box-shadow: none; } button, label { color: @color_text; } button:hover { background-color: @color_bg_dark; } scale trough { min-width: 1px; min-height: 2px; } #bar { margin: 4px; background-image: none; } .widget { padding: 0px 10px; } .popup { background-color: @color_bg_dark; border: 1px solid @color_border; padding: 1em; } /* .popup .item:hover { color: red; background-color: red; } */ .focused { background-color: @color_bg; border-radius: 5px; } .focused .label { color: @color_fg; } /* -- clipboard -- */ .clipboard { margin-left: 5px; font-size: 1.2em; } .popup-clipboard .item { padding-bottom: 0.3em; border-bottom: 1px solid @color_border; } /* -- clock -- */ .clock { font-weight: bold; margin-left: 5px; } .popup-clock .calendar-clock { color: @color_text; font-size: 2.5em; padding-bottom: 0.1em; } .popup-clock .calendar { background-color: @color_bg; color: @color_text; } .popup-clock .calendar .header { padding-top: 1em; border-top: 1px solid @color_border; font-size: 1.5em; } .popup-clock .calendar:selected { background-color: @color_border_active; } /* -- launcher -- */ .launcher { background-color: @color_bg; border-radius: 5px; } .launcher .item { margin-right: 4px; } .launcher .ifix examtem:not(.focused):hover { background-color: @color_bg_dark; } .launcher .open { border-bottom: 1px solid @color_text; } .launcher .focused { border-bottom: 1px solid @color_border_active; } .launcher .urgent { border-bottom-color: @color_urgent; } .popup-launcher { padding: 0; } .popup-launcher .popup-item:not(:first-child) { border-top: 1px solid @color_border; } /* -- music -- */ .music:hover * { background-color: @color_bg_dark; } .popup-music .album-art { margin-right: 1em; } .popup-music .icon-box { margin-right: 0.4em; } .popup-music .title .icon, .popup-music .title .label { font-size: 1.7em; } .popup-music .controls *:disabled { color: @color_border; } .popup-music .volume .slider slider { border-radius: 100%; } .popup-music .volume .icon { margin-left: 4px; } .popup-music .progress .slider slider { border-radius: 100%; } /* notifications */ .notifications .count { font-size: 0.6rem; background-color: @color_text; color: @color_bg; border-radius: 100%; margin-right: 3px; margin-top: 3px; padding-left: 4px; padding-right: 4px; opacity: 0.7; } /* -- script -- */ .script { padding-left: 10px; } /* -- sys_info -- */ .sysinfo { margin-left: 10px; } .sysinfo .item { margin-left: 5px; } /* -- tray -- */ .tray { background: @color_bg_dark; border-radius: 5px; margin-left: 10px; } /* -- volume -- */ .popup-volume .device-box { border-right: 1px solid @color_border; } /* -- workspaces -- */ .workspaces .item.focused { box-shadow: inset 0 -3px; background-color: @color_bg_dark; } .workspaces .item.urgent { background-color: @color_urgent; } .workspaces .item:hover { box-shadow: inset 0 -3px; } /* -- custom: power menu -- */ .popup-power-menu #header { font-size: 1.4em; padding-bottom: 0.4em; margin-bottom: 0.6em; border-bottom: 1px solid @color_border; } .popup-power-menu .power-btn { border: 1px solid @color_border; padding: 0.6em 1em; } .popup-power-menu #buttons > *:nth-child(1) .power-btn { margin-right: 1em; } ``` </details>

JakeStanger

2026-05-23 01:53:54 +01:00