Filament•15mo ago

Tab closed when I open url in new tab and change theme

I create a custom theme-switch (copy paste filament theme switch in blade), but when I open my pages in new tab and then switch the theme closed that new tab, what should be the issue? My theme switch blade

<div
    x-data="{
        theme: null,

        init: function () {
            this.theme = localStorage.getItem('theme') || 'system'

            $dispatch('theme-changed', theme)

            $watch('theme', (theme) => {
                $dispatch('theme-changed', theme)
            })
        },
    }"
    class="{{ $class }} gap-x-1"
>
    <x-filament-panels::theme-switcher.button
        icon="heroicon-o-sun"
        theme="light"
    />

    <x-filament-panels::theme-switcher.button
        icon="heroicon-o-moon"
        theme="dark"
    />

    <x-filament-panels::theme-switcher.button
        icon="heroicon-o-computer-desktop"
        theme="system"
    />
</div>

<div
    x-data="{
        theme: null,

        init: function () {
            this.theme = localStorage.getItem('theme') || 'system'

            $dispatch('theme-changed', theme)

            $watch('theme', (theme) => {
                $dispatch('theme-changed', theme)
            })
        },
    }"
    class="{{ $class }} gap-x-1"
>
    <x-filament-panels::theme-switcher.button
        icon="heroicon-o-sun"
        theme="light"
    />

    <x-filament-panels::theme-switcher.button
        icon="heroicon-o-moon"
        theme="dark"
    />

    <x-filament-panels::theme-switcher.button
        icon="heroicon-o-computer-desktop"
        theme="system"
    />
</div>

->renderHook(
    'panels::global-search.after', fn (): View => view('theme-switch', ['class' => 'hidden md:flex']),
)

->renderHook(
    'panels::global-search.after', fn (): View => view('theme-switch', ['class' => 'hidden md:flex']),
)

Solution:

I think I found the issue. You can add a close() method to the wrapper div: ``` x-data="{ theme: null, ...

Jump to solution

10 Replies

VpOP•15mo ago

This happen when I open "any" page in new tab then switch theme, other than theme switch, everything is working fine in new tab bump 🤥

Patrick Boivin•15mo ago

I don't get it... switching to Dark theme ramdomly closes the active tab? Can you replicate this with the built-in theme switcher? Or is the issue only with your custom switcher?

VpOP•15mo ago

Not dark theme only, any theme button.., open any page in new-tab, then switching theme closed that new tab... and yes this only happen in my custom switcher, working fine in built-in.

Patrick Boivin•15mo ago

Is this on Github? Or can you setup a small reproduction repository? I can give it a try if you want.

VpOP•15mo ago

I am out of work rn, will setup a repo tomorrow and share here.. thank you in advance Hi @Patrick Boivin here is the reproduction repo https://github.com/valpuia/theme-switch-in-panel Just follow readme file

Patrick Boivin•15mo ago

I'll give this a try today

Solution

Patrick Boivin•15mo ago

I think I found the issue. You can add a close() method to the wrapper div:

    x-data="{
        theme: null,

        init: function () {
            this.theme = localStorage.getItem('theme') || 'system'

            $dispatch('theme-changed', theme)

            $watch('theme', (theme) => {
                $dispatch('theme-changed', theme)
            })
        },

        close() {
            // Empty method to prevent closing the browser tab
        },
    }"

    x-data="{
        theme: null,

        init: function () {
            this.theme = localStorage.getItem('theme') || 'system'

            $dispatch('theme-changed', theme)

            $watch('theme', (theme) => {
                $dispatch('theme-changed', theme)
            })
        },

        close() {
            // Empty method to prevent closing the browser tab
        },
    }"

Patrick Boivin•15mo ago

There's a call to close() inside of the theme-switcher.button component (because it's inside of a dropdown) And because it doesn't exist in this context, it bubbles up to the window element and it closes the browser tab

VpOP•15mo ago

Thank you very much, it's working..

Gaming

Programming

Tab closed when I open url in new tab and change theme