BUG? Focus issue with my form fields in a modal on a Livewire component in Tabs

[antoinemy]

Package

Panel builder

Package Version

3

How can we help you?

Hello everyone,

I have a resource that has a form with tabs. In one of the tabs, I need form fields. In the other, I need to display a custom table. So I created a Livewire component like in the documentation, and integrated it into my second tab. I also duplicated it to put it out of tabs to find the cause of my problem (and it seems a conflict with tabs).

My problem is this: When I'm in my second tab and I open my modal (which only opens on the second click), my form fields keep the focus when I click outside. However if I do the same procedure on my Livewire component outside of the tabs. Everything works like a charm.

Enregistrement.de.l.ecran.2024-05-12.a.23.53.09.mov

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Tabs::make()
                ->schema([
                    Tab::make('Infos')
                        ->schema([
                            TextInput::make('first_name'),
                        ]),
                    Tab::make('Stats')
                        ->schema([
                            Livewire::make(StatsUsers::class),
                        ]),

                ])
                ->columnSpanFull()
                ->contained(false),
                
               Livewire::make(StatsUsers::class)
                    ->columnSpanFull(),
        ]);
}

class StatsUsers extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;
    
    public function table(Table $table): Table
    {
        return $table
            ->query(User::query())
            ->headerActions([
                Action::make('test')
                    ->form([
                        TextInput::make('name'),
                        DatePicker::make('date'),
                    ])
            ])
            ->columns([
                TextColumn::make('first_name'),
            ]);
    }

    public function render()
    {
        return view('livewire.stats-users');
    }
}

The tabs seem to create a conflict.

Someone can help me? Or is this a bug?

Thank you, Antoine

[antoinemy]

Ok, I found out where the problem is and found a workaround. The problem seems to be the tabindex present in each Tab. The tabindex="0" present in the view's extraAttributes poses a problem for modal forms in Livewire's custom components.

I override the tab.blade.php view in my Tab Component who extend FilamentTab :

@php
    $id = $getId();
    $isContained = $getContainer()->getParentComponent()->isContained();

    $activeTabClasses = \Illuminate\Support\Arr::toCssClasses([
        'fi-active',
        'p-6' => $isContained,
        'mt-6' => ! $isContained,
    ]);

    $inactiveTabClasses = 'invisible h-0 overflow-y-hidden p-0';
@endphp

<div
    x-bind:class="{
        @js($activeTabClasses): tab === @js($id),
        @js($inactiveTabClasses): tab !== @js($id),
    }"
    x-on:expand="tab = @js($id)"
    {{
        $attributes
            ->merge([
                'aria-labelledby' => $id,
                'id' => $id,
                'role' => 'tabpanel',
                {{--'tabindex' => '0',--}}
                'wire:key' => "{$this->getId()}.{$getStatePath()}." . \Filament\Forms\Components\Tab::class . ".tabs.{$id}",
            ], escape: false)
            ->merge($getExtraAttributes(), escape: false)
            ->class(['fi-fo-tabs-tab outline-none'])
    }}
>
    {{ $getChildComponentContainer() }}
</div>

I commented out the line: {{--'tabindex' => '0',--}} but I imagine that if this line existed it was for a good reason and I hope that this will not pose a problem no other problems. If a Filament expert can come by and give their opinion, that would be great!