tauri-apps / tauri

Build smaller, faster, and more secure desktop and mobile applications with a web frontend.
https://tauri.app
Apache License 2.0
83.62k stars 2.51k forks source link

[bug] [macos] `appWindow.setTheme(null)` then output in input element, app crashes #11384

Open ayangweb opened 14 hours ago

ayangweb commented 14 hours ago

Describe the bug

Reproduction case: https://github.com/ayangweb/tauri-input-demo

This bug is so tricky that I've been troubleshooting for ages to figure out the problem ☹️ I don't really understand why it's having this problem

Currently, tested to be a stable reproduction only on macOS, The video is quite long, so please be patient

https://github.com/user-attachments/assets/b43f019a-b212-4c30-a1b3-abac92ffb143

In my development EcoPaste, I also can stable reproducing bug!

https://github.com/user-attachments/assets/631c9056-3e26-4127-aa65-872f4a8de7f4

Reproduction

No response

Expected behavior

No response

Full tauri info output

[✔] Environment
    - OS: Mac OS 14.4.0 arm64 (X64)
    ✔ Xcode Command Line Tools: installed
    ✔ rustc: 1.81.0 (eeb90cda1 2024-09-04)
    ✔ cargo: 1.81.0 (2dbb1af80 2024-08-20)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: stable-aarch64-apple-darwin (default)
    - node: 21.7.1
    - pnpm: 9.12.1
    - yarn: 1.22.22
    - npm: 10.5.0
    - bun: 1.1.29

[-] Packages
    - tauri 🦀: 2.0.4
    - tauri-build 🦀: 2.0.1
    - wry 🦀: 0.46.1
    - tao 🦀: 0.30.3
    - tauri-cli 🦀: 2.0.0-rc.7
    - @tauri-apps/api : 2.0.2
    - @tauri-apps/cli : 2.0.3

[-] Plugins
    - tauri-plugin-dialog 🦀: 2.0.1
    - @tauri-apps/plugin-dialog : 2.0.0
    - tauri-plugin-process 🦀: 2.0.1
    - @tauri-apps/plugin-process : 2.0.0
    - tauri-plugin-shell 🦀: 2.0.1
    - @tauri-apps/plugin-shell : 2.0.0
    - tauri-plugin-autostart 🦀: 2.0.1
    - @tauri-apps/plugin-autostart : 2.0.0
    - tauri-plugin-fs 🦀: 2.0.1
    - @tauri-apps/plugin-fs : 2.0.0
    - tauri-plugin-updater 🦀: 2.0.2
    - @tauri-apps/plugin-updater : 2.0.0
    - tauri-plugin-single-instance 🦀: 2.0.1
    - @tauri-apps/plugin-single-instance : not installed!
    - tauri-plugin-global-shortcut 🦀: 2.0.1
    - @tauri-apps/plugin-global-shortcut : 2.0.0
    - tauri-plugin-log 🦀: 2.0.1
    - @tauri-apps/plugin-log : 2.0.0
    - tauri-plugin-sql 🦀: 2.0.1
    - @tauri-apps/plugin-sql : 2.0.0
    - tauri-plugin-os 🦀: 2.0.1
    - @tauri-apps/plugin-os : 2.0.0

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../dist
    - devUrl: http://localhost:1420/
    - framework: React
    - bundler: Vite

Stack trace

No response

Additional context

This bug was reported by a user of EcoPaste, so it's not just my computer!

ayangweb commented 4 hours ago

Originally I was trying to achieve this by doing the following, but it was also problematic!

useAsyncEffect(async () => {
        const appWindow = getCurrentWebviewWindow();

        let isDark = globalStore.appearance.theme === "dark";

        if (globalStore.appearance.theme === "auto") {
            isDark = (await appWindow.theme()) === "dark"; // Gets the theme color of the window
            // or
            isDark = window.matchMedia("(prefers-color-scheme: dark)").matches; // It is also the theme color of the window, not the system theme color.
        }

        appWindow.setTheme(isDark ? "dark" : "light");

        globalStore.appearance.isDark = isDark;
}, [globalStore.appearance.theme]);

// If the value of `appWindow.setTheme` is not null or undefined, a change in the system theme will not be triggered.
appWindow.onThemeChanged(async ({ payload }) => {
    if (globalStore.appearance.theme !== "auto") return;

    globalStore.appearance.isDark = payload === "dark";
});