Issue with hiding transparent windows

[ornate belfry]

Hey I have this overlay that's activated whenever a global shortcut is registered and I am currently ensuring that the overlay can be dismissed in one of three ways: press the escape key, press the same global shortcut when the overlay is active or click somewhere else on the screen to dismiss the window. Except I'm experiencing a weird bug on the third approach that I'm not able to reproduce at will and looks like so:

the one on the left is while the overlay is active and the one on the right is after i have clicked away from it

[ornate belfry]

most of the times i don't experience the above issue but it does seem to pop up randomly i can't seem to explain why

i'm assuming it could be an issue with how i configured my tauri.conf.json or the fact that i'm maybe misusing useState on the react front-end but i'm not too sure because i don't experience this issue when i use the escape key to dismiss the window

overlay/page.tsx

tauri.conf.json

 {
        "label": "overlay",
        "center": true,
        "height": 120,
        "width": 720,
        "url": "http://localhost:3000/overlay",
        "fullscreen": false,
        "decorations": false,
        "alwaysOnTop": true,
        "transparent": true,
        "resizable": false,
        "visible": false
      }

main.rs

#[tauri::command]
fn toggle_search_bar(window: Window) {
    let overlay = window.get_window("overlay").unwrap();
    if overlay.is_visible().unwrap() {
        overlay.hide().unwrap();
        let app_handle = window.app_handle();
        app_handle.emit_all("overlay-hidden", ()).unwrap();
    } else {
        overlay.show().unwrap();
        overlay.set_focus().unwrap();
        let app_handle = window.app_handle();
        app_handle.emit_all("overlay-shown", ()).unwrap();
    }
}

#[tauri::command]
fn hide_search_bar(window: Window) {
    let overlay = window.get_window("overlay").unwrap();
    if overlay.is_visible().unwrap() {
        overlay.hide().unwrap();
        let app_handle = window.app_handle();
        app_handle.emit_all("overlay-hidden", ()).unwrap();
    }
}

#[tauri::command]
fn show_overlay(window: Window) {
    let overlay = window.get_window("overlay").unwrap();
    overlay.show().unwrap();
    overlay.set_focus().unwrap();
    let app_handle = window.app_handle();
    app_handle.emit_all("overlay-shown", ()).unwrap();
}

[proud wedge]

What you see is the window's shadow. To disable it, simply add "shadow": false, in your window's config. Tell me if this works!

[ornate belfry]

hmm it says property shadow is not allowed 🤔

[proud wedge]

Never faced this issue, but it's weird. Because it's just another property, like "transparent", "resizable", etc. I'm not sure I can help more ^^'

[ornate belfry]

idk what i did but i think i fixed it