filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
19.02k stars 2.94k forks source link

Custom widget doesn't appear in header widgets but does when called directly in blade #11474

Closed InfinityXTech closed 8 months ago

InfinityXTech commented 8 months ago

Package

filament/filament

Package Version

v3.2.33

Laravel Version

10.43.0

Livewire Version

v3.4.4

PHP Version

8.2.12

Problem description

I have this custom widget:

class WorldMapChart extends Widget
{
    protected static string $view = 'filament.widgets.world-map-chart';

    protected static ?string $maxHeight = '500px';
    protected static ?string $heading = 'World';
    protected static ?string $pollingInterval = null;
}
<x-filament-widgets::widget>
    <x-filament::section>
        @vite('resources/js/mapChart.js')
        <div x-ignore id="map"></div>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const clicksPerCountry = {ca: 5};
                new jsVectorMap({
                    selector: '#map',
                    map: 'world',
                    showTooltip: true,
                    onRegionTooltipShow(event, tooltip, code) {
                        tooltip.text(
                            `<h5>${tooltip.text()}: ${clicksPerCountry[code.toLowerCase()] ?? 0} clicks</h5>`,
                            true // Enables HTML
                        )
                    }
                    // Additional options...
                });
            });
        </script>
    </x-filament::section>
</x-filament-widgets::widget>

When I call the widget with getHeaderWidgets widget script doesn't run at all:

protected function getHeaderWidgets(): array
    {
        return [
            WorldMapChart::class
        ];
    }

But when I call it directly in file:

<x-filament-panels::page>
        @livewire(\App\Filament\Widgets\WorldMapChart::class)
</x-filament-panels::page>
image

Everything works fine.

Expected behavior

Display working widget.

Steps to reproduce

Just create custom winget, add alert script and call it in header/directly.

Reproduction repository

https://github.com/soixt/filament-custom-widget-doesnt-appear-in-header

Relevant log output

No response

zepfietje commented 8 months ago

This is probably because the script isn't loaded on the initial page load.

Make sure the widget isn't lazy loaded.

Alternatively, lazy load the JavaScript script if you want to keep lazy loading of the widget.