Tab panel stays hidden if component is lazy loaded

[stebrl]

Flux version

v1.1.4

Livewire version

v3.5.19

Tailwind version

v3.4.17

What is the problem?

Hey there, I just found an issue where a <flux:tab.panel> stays hidden if the component is lazy loaded.
Actually the data-selected attribute is simply not set for the wire:modeled panel.

Code snippets

Class based:

<?php

namespace App\Livewire;

use Livewire\Attributes\Lazy;
use Livewire\Component;

#[Lazy]
class Test extends Component
{
    public string $tab = 'one';
}

<div>
    <flux:tab.group>
        <flux:tabs wire:model="tab">
            <flux:tab name="one">One</flux:tab>
            <flux:tab name="two">Two</flux:tab>
        </flux:tabs>
        <flux:tab.panel name="one">One</flux:tab.panel>
        <flux:tab.panel name="two">Two</flux:tab.panel>
    </flux:tab.group>
</div>

...or as a Volt component (make sure to lazy load it):

<?php
 
use function Livewire\Volt\{state};
 
state(['tab' => 'one']);
 
?>

<div>
    <flux:tab.group>
        <flux:tabs wire:model="tab">
            <flux:tab name="one">One</flux:tab>
            <flux:tab name="two">Two</flux:tab>
        </flux:tabs>
        <flux:tab.panel name="one">One</flux:tab.panel>
        <flux:tab.panel name="two">Two</flux:tab.panel>
    </flux:tab.group>
</div>

How do you expect it to work?

<ui-tabs> should correctly initialize the panel and set the data-selected attribute when lazy loaded.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[stebrl]

My current workaround is to add
x-init="$el.setAttribute('data-selected', 'data-selected'); $el.setAttribute('tabindex', 0)"
to the first <flux:tab.panel>.

[joshhanley]

@stebrl thanks for reporting! I've submitted a PR with a fix.