filament icon indicating copy to clipboard operation
filament copied to clipboard

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

Open InfinityXTech opened this issue 1 year ago • 0 comments

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

InfinityXTech avatar Feb 19 '24 07:02 InfinityXTech