Skip to content

Cannot targeting flux:sidebar.group button for persisting the expanded state #2580

@ghabriel25

Description

@ghabriel25

Flux version

v2.13

Livewire version

v4.2

Tailwind version

v4.2

Browser and Operating System

Chrome on Window

What is the problem?

I'm trying to persist the expanded state of sidebar group but there is no option for that. Then I made it as Livewire component with #[Session] so I can toggle the expanded attribute and persisted.

However, there is no way to targeting the button inside sidebar group. Here's what I have tried

  • Use wire:click="$toggle('expanded')" on sidebar group
  • It works but it also triggered from child element click event
  • Try to add .self modifier, there was no error but nothing happened
    (No network request, expanded not changed)

Code snippets to replicate the problem

<?php

use Livewire\Component;

new class extends Component
{
    #[Session]
    public bool $expanded = true;
}
<flux:sidebar.group :expanded="$expanded"
                    expandable
                    heading="My Items"

                    {{-- also get triggered from child click event --}}
                    {{-- using .self modifier doesnt work --}}
                    wire:click="$toggle('expanded')"> 
    ...
</flux:sidebar.group>

Workaround

<flux:sidebar.group :expanded="$expanded"
                    expandable
                    heading="My Items"
                    x-data="{ button: $el.querySelector('button') }"
                    x-init="button.setAttribute('wire:click', `$toggle('expanded')`)">
    ...
</flux:sidebar.group>

Screenshots/ screen recordings of the problem

N/A

How do you expect it to work?

I expect wire:click attribute on sidebar group getting passed down to the button that trigger the sidebar group expanded or not

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions