Tab component has a flicker on page refresh

[alexmanase]

Flux version

v1.0.32

Livewire version

v3.5.17

What is the problem?

The Tab component is flickering when the selected value is not the first one.

Here I selected the second value for tab and it's flickering on refresh.

Screen.Recording.2024-12-16.at.16.02.48.mov

Code snippets

use Livewire\Volt\Component;

new class extends Component
{
    public $tab = 'account';
};

<flux:tab.group>
    <flux:tabs wire:model="tab">
        <flux:tab name="profile">Profile</flux:tab>
        <flux:tab name="account">Account</flux:tab>
        <flux:tab name="billing">Billing</flux:tab>
    </flux:tabs>

    <flux:tab.panel name="profile">
        Profile content
    </flux:tab.panel>
    <flux:tab.panel name="account">
        Account content
    </flux:tab.panel>
    <flux:tab.panel name="billing">
        Billings content
    </flux:tab.panel>
</flux:tab.group>

How do you expect it to work?

There should be no flickering on refresh.

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.

[jeffchown]

@alexmanase You can add x-cloak to the flux:tab.group to hide the Alpine update to set the tab to the value of your $tab property. e.g. <flux:tab.group x-cloak>

[alexmanase]

Thank you! It works this way, but I think it would be ideal to be by default with x-cloak.

[jeffchown]

You're welcome!