Collapsing Accordion with exclusive inside Accordion with exclusive propagates to the parent

[dev-idkwhoami]

Flux version

v1.0.32

Livewire version

v3.5.17

What is the problem?

When you place an accordion inside an accordion, both with the exclusive attribute, when opening a child's accordion item, the parent is closed.

I don't know the details but im assuming the "close event" is not being stopped at the accordion so it propagates up to the parent accordion.

Code snippets

            <flux:accordion exclusive>

                <flux:accordion.item heading="How do i use ____ to pay ?" expanded class="space-y-6 border-b-2 border-b-zinc-200">

                    <flux:accordion exclusive class="space-y-3">

                        <flux:accordion.item heading="Paypal">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, delectus.</p>
                        </flux:accordion.item>
                        <flux:accordion.item heading="Credit Card">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, delectus.</p>
                        </flux:accordion.item>

                    </flux:accordion>
                </flux:accordion.item>

            </flux:accordion>

How do you expect it to work?

I would expect the accordions to work separately from each other.

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]

@dev-idkwhoami While I can reproduce what you describe, personally, I wouldn't nest accordions as I feel it creates a complicated UI. In your example, I would have two flux:accordion.items at the 'parent' level, one for Paypal and one for Credit Card as then the user would only have to click once to get their answer. (vs. 2 clicks into the nested structure)

[dev-idkwhoami]

The provided code sample is a VERY simplified version of my actual use case.

All that would need to be done is stop the propagation at the accordion.item's closest accordion parent element. At least it works when I do this:

        <flux:accordion exclusive>

            <flux:accordion.item heading="How do i use ____ to pay ?" expanded>

                <flux:accordion @lofi-disclosable-change.stop="" exclusive>

                    <flux:accordion.item heading="Paypal">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, delectus.</p>
                    </flux:accordion.item>
                    <flux:accordion.item heading="Credit Card">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, delectus.</p>
                    </flux:accordion.item>

                </flux:accordion>

            </flux:accordion.item>

            {{-- More Questions ... --}}
        </flux:accordion>

[jeffchown]

@dev-idkwhoami Gotcha. Nice workaround!

[joshhanley]

@dev-idkwhoami thanks for reporting! I've submitted a PR with a fix to add e.stopPropagation() to the lofi-disclosable-change event.