accordion's leading icon hover shows up at disable

[cincer]

Flux version

v2.14.1

Livewire version

v4.3.1

Tailwind version

v4.2.2

Browser and Operating System

Safar on macOS

What is the problem?

I did a flux accordion with leading icon.
But when accordion item is disabled, the leading icon is changing when I hover the item.
It's only behaving this way when Blaze is enabled.

Kepernyofelvetel.2026-06-05.-.13.02.19.mov

Code snippets to replicate the problem

`<flux:accordion variant="reverse"
exclusive>

    @foreach ($this->categories as $category)
        <flux:accordion.item :disabled="$category['disabled']">
            <flux:accordion.heading :disabled="$category['disabled']">
                <div class="align-center flex justify-between">
                    {{ __($category['heading']) }} {{ __('checks') }}

                    @if ($category['disabled'])
                        <flux:badge :label="__('Commitment not found')"
                            inset="top bottom"
                            size="sm" />
                    @else
                        <x-diaries.responses :responses="$category['responses']" />
                    @endif
                </div>
            </flux:accordion.heading>

            <flux:accordion.content>
                <livewire:diaries.check lazy
                    :key="$category['key']"
                    :check-ids="$category['check_ids']" />
            </flux:accordion.content>
        </flux:accordion.item>
    @endforeach

</flux:accordion>`

Screenshots/ screen recordings of the problem

`<flux:accordion variant="reverse"
exclusive>

    @foreach ($this->categories as $category)
        <flux:accordion.item :disabled="$category['disabled']">
            <flux:accordion.heading :disabled="$category['disabled']">
                <div class="align-center flex justify-between">
                    {{ __($category['heading']) }} {{ __('checks') }}

                    @if ($category['disabled'])
                        <flux:badge :label="__('Commitment not found')"
                            inset="top bottom"
                            size="sm" />
                    @else
                        <x-diaries.responses :responses="$category['responses']" />
                    @endif
                </div>
            </flux:accordion.heading>

            <flux:accordion.content>
                <livewire:diaries.check lazy
                    :key="$category['key']"
                    :check-ids="$category['check_ids']" />
            </flux:accordion.content>
        </flux:accordion.item>
    @endforeach

</flux:accordion>`

How do you expect it to work?

With blaze turned on no hover effect shown on disabled accordion item's icon.

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.

[joshhanley]

@cincer thanks for reporting!

I've had a look into this and the issue is when Blaze is enabled the chevron icon is being folded even though it should be aware of the disabled state from the parent. One option is we can forward the disabled state from the accordion item to the icon using :disabled="$disabled" or see if we can add a fix to Blaze.

@ganyicz do you have any thoughts on which you'd prefer? I pushed a branch here from Codex with a possible fix but I'm skeptical about it. https://github.com/livewire/blaze/tree/josh/fix-aware-folding-with-missing-parent-data

[ganyicz]

@joshhanley hmm, yeah the trouble is that when accordion.heading is compiled as a separate file, Blaze folds the accordion.icon components inside because it appears as if there are no dynamic properties, but in reality it accepts the disabled prop which is unsafe.

<flux:accordion.icon pointing="down" class="hidden group-data-open/accordion-heading:block text-zinc-800! dark:text-white!" />

The problem is Blaze won't know if the disabled prop will be dynamic at compile time, that is only determined at runtime when the compiled file is actually used. I'm pretty sure there is no way how we can fix this in Blaze as we don't have the data to decide whether or not to fold at compile time, so in this case we should just always fold.

The Codex draft seems like it would abort folding in a lot of other cases as well which we wouldn't want.

I think the best solution here is to forward the disabled state using :disabled, that will force Blaze to always abort folding of the icon component.

Might be worth checking if we're not relying on this pattern elsewhere in Flux.

[joshhanley]

Thanks @ganyicz! Yep makes sense.

@cincer I've submitted a PR to Flux Pro with a fix.