Livewire components not found when using hasCombinedRelationManagerTabsWithContent()

[joshembling]

Package

filament/filament

Package Version

^3.0-stable

Laravel Version

^10.0

Livewire Version

No response

PHP Version

PHP 8.1.0

Problem description

When rendering a custom livewire component on a resource, that is nested within tabs (as per hasCombinedRelationManagerTabsWithContent(), any time you switch between tabs page stops working with a console error: Uncaught (in promise) Component not found: {id}

Expected behavior

Switch between tabs and keep renders of custom Livewire components

Steps to reproduce

• Clone repo
• Run migrations
• Run php artisan db:seed
• Go to PostResource and view a record
• Try and switch between tabs
• See from second attempt, this no longer works
• View console for same error

Reproduction repository

https://github.com/joshembling/filament-tabs-livewire

Relevant log output

Uncaught (in promise) Component not found: idopTEblGCNIQYMtdUw7

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[marlocorridor]

Hi @joshembling, did yours got fixed? I'm having similar issue.

[joshembling]

Hi @joshembling, did yours got fixed? I'm having similar issue.

No this is still an issue.

[naseef]

I'm also having same issue. Any workarounds? This happens only when I am having a custom livewire component in the infolist

[naseef]

If I disable hasCombinedRelationManagerTabsWithContent(), i as having Uncaught Snapshot missing on Livewire component with id as in #10715 . Now that is fixed but this issue still persists

[kmaphane]

Good day,

Had the same issue with a custom dashboard, tabs, and filter. All works well. I am able to show the content I want for each tab using livewire components. But once I click on the filter, the livewire content ghosts me and gives me the error:

"Uncaught Snapshot missing on Livewire component with id:"

The code is as follows

<?php

namespace App\Filament\Pages;

use App\Livewire\AnotherMeterReadings;
use App\Livewire\WaterMeterReadings;
use Filament\Forms\Components\DatePicker;
use Filament\Pages\Dashboard\Actions\FilterAction;
use Filament\Pages\Dashboard as PagesDashboard;
use Filament\Pages\Dashboard\Concerns\HasFiltersAction;
use Filament\Resources\Concerns\HasTabs;

class Dashboard extends PagesDashboard
{
    use HasFiltersAction;
    use HasTabs;

    public ?string $activeTab = null;

    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.dashboard';

    protected static ?string $slug = '/';

    protected function getTabs(): array
    {
        return [
            'tab1' => 'Overview',
            'tab2' => 'Graphs',
        ];
    }

    protected function getHeaderActions(): array
    {
        $actions = [
            FilterAction::make()
                ->form([
                    DatePicker::make('startDate'),
                    DatePicker::make('endDate')
                        ->default(now()),
                    // ...
                ]),
        ];

        return $actions;
    }

    protected function getTabView($activeTab): ?string
    {
        switch ($activeTab) {
            case 'tab1':
                return WaterMeterReadings::class;
            case 'tab2':
                return AnotherMeterReadings::class;
            default:
                return WaterMeterReadings::class;
        }
    }
}

<x-filament-panels::page x-data="{activeTab: 'tab1'}" x-init="(console.log(activeTab))">
 @dump($this->filters)
    <x-filament::tabs label="Overview">
        @foreach ($this->getTabs() as $tab => $label)
            <x-filament::tabs.item
                alpine-active="activeTab === '{{ $tab }}'"
                x-on:click="activeTab = '{{ $tab }}'"
            >
                {{ $label }}
            </x-filament::tabs.item>
        @endforeach
    </x-filament::tabs>
   @foreach ($this->getTabs() as $tab => $component)
        <div wire:key="{{ $tab }}" x-show="activeTab === '{{ $tab }}'">
             @dump($this->filters)
            <div>
                {{-- This is the content for tab {{ $tab }} --}}
                @livewire($this->getTabView($tab), ["filters" => $this->filters], ["key" => $tab])
            </div>
        </div>
    @endforeach
</x-filament-panels::page>

The livewire component is a simple widget as follows:

<?php

namespace App\Livewire;

use App\Models\WaterMeter;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use Filament\Widgets\TableWidget as BaseWidget;

class WaterMeterReadings extends BaseWidget
{
    use InteractsWithPageFilters;

    public function table(Table $table): Table
    {
        return $table
            ->query(
                WaterMeter::query()
            )
            ->columns([
                TextColumn::make('name'),
            ]);
    }
}

A couple of snaps:

Initial load:

When I open Filter:

Hope someone can help.