Two actions not working properly on Table component

[DCodeMania]

maryUI version

1.34

daisyUI version

4.12.10

Livewire version

3.5

What browsers are affected?

Firefox, Chrome, Safari, Microsoft Edge

What happened?

When I use two actions on a Table component, clicking the remove button also triggers the edit method. However, when I click the edit button, it works fine. I'm not sure where the issue is. Below is the code:

Blade View Codes of Table component:

<x-table :headers="$headers" :rows="$posts" @row-click="$wire.edit($event.detail.id)" with-pagination striped>
  @scope('cell_image', $stuff)
  <img src="storage/images/{{ $stuff->image }}" alt="{{ $stuff->title }}" width="80" class="rounded shadow-sm">
  @endscope

  @scope('actions', $post)
  <div class="flex gap-10">
    <x-button icon="o-pencil-square" wire:target='edit({{ $post->id }})' wire:click="edit({{ $post->id }})" spinner class="text-green-500 btn-sm" />
    <x-button icon="o-trash" wire:target='remove({{ $post->id }})' wire:click="remove({{ $post->id }})" spinner class="text-red-500 btn-sm" />
  </div>
  @endscope
</x-table>

Livewire component class code:

public function remove($id) {
    $post = ModelsPost::find($id);
    $post->delete();
}

public function edit($postId) {
    $post = ModelsPost::find($postId);
    $this->title = $post->title;
    $this->slug = $post->slug;
    $this->content = $post->content;
    $this->image = $post->image;
    $this->addPostModal = true;
    $this->editPostModal = true;
}

[andrew-m-p]

Try using only wire:click only, if you use target then you usually use wire:loading with it https://livewire.laravel.com/docs/wire-loading

[DCodeMania]

Try using only wire:click only, if you use target then you usually use wire:loading with it https://livewire.laravel.com/docs/wire-loading

I also tried only wire:click without wire:target but still when I click on delete button then edit action is also triggered.

[andrew-m-p]

Try taking out @row-click and clear caches

[DCodeMania]

Try taking out @row-click and clear caches

@andrew-m-p, removing @row-click worked. Thank you so much! However, can't I use @row-click as well?

[andrew-m-p]

Depends on what you are after, if you use row click then the contents of the whole row are clickable, but that might include buttons etc.

[DCodeMania]

Depends on what you are after, if you use row click then the contents of the whole row are clickable, but that might include buttons etc.

I believe this issue needs to be resolved. The goal is to ensure that anyone can use @row-click and multiple action buttons within a Table component. @robsontenorio

[EdgarsJoja]

Did you try wire:click.stop? It stops event propagation, which sounds like what you want - click on the action, but stop the event from triggering "row click".

[robsontenorio]

No matter what button will click, the @row-click will be invoked.

@EdgarsJoja That is correct ! You need the .stop.

<x-button wire:click="edit({{ $user->id }})">Edit</x-button>
<x-button wire:click.stop="remove({{ $user->id }})">remove</x-button>