Clickable row add to bulk select

[s7thamon]

I have been trying to figure out how to add a row to the bulk select when clicking on it.

So far I managed to get it somewhat working with the following:

public function configure(): void
    {
        $this->setTrAttributes(function($row, $index) {
            return [
                'class' => 'clickable-row',
                'wire:click' => 'selectRow('.$row->id.')',
            ];
        });
    }

    public function selectRow($id)
    {
        if (!in_array($id, $this->selected)) {
            $this->selected[] = $id;
        } else {
            $this->selected = array_diff($this->selected, [$id]);
        }
    }
    ```
    
    However this is very buggy when clicking the actual checkbox, it seems to refresh the whole DOM.
    
    Any other ideas to accomplish this behavior?

[lrljoe]

Just so I'm clear - you want a click on any column in the row, to toggle the Bulk Actions checkbox for that row?

What you're doing at the moment, will result in a server-side call for your "public function selectRow", which will then cause a re-render.

Doing it client-side is best, there are methods used internally that may be of use, as the Bulk Actions uses AlpineJS to determine what is part of the "selected" array.

You could also just use straight JS to toggle the checkbox:

  $this->setTrAttributes(function($row, $index) {
    return [
        'x-on:click' => "document.querySelectorAll('[rowpk=\"".$row->{$this->getPrimaryKey()}."\"] input')[0].checked = !document.querySelectorAll('[rowpk=\"".$row->{$this->getPrimaryKey()}."\"] input')[0].checked",
    ];
  });

However, using the built-in methods would be smoother!