Buttons/Bulk Action Buttons missing <type="button"> causes form to submit while wrapped inside <form> tag

[kuratsunade]

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

No, this error is not related to views.

Is there an error in the console?

No

PHP Version

8.1.2

PowerGrid

5.8.1

Laravel

10.48

Livewire

3.5.1

Alpine JS

No response

Theme

Tailwind 3.x

Describe the bug.

Hi,

Thank you for a great package, it's been working wonders for me for the project within the past year.

When Powergrid was in 4.x, I was able to get around the issue by publish views into my view folder, and revise bulk actions via /components/actions-header.blade.php for the Bulk Action buttons, and was able to get around the regular button by rendering my own blade component.

After upgraded to version 5.x, /Bulk Action button was actually generated by ActionsController under src/Components/Actions.

After reading through the new and old documents, I was unable to find a hook which can be used for that purpose. I've also tried to mask the Bulk action button into blade component without luck as it is hooked into listener.

Perhaps providing a way to hook into the Button class to provide a button type would make it work?

Thanks again!

K.

To Reproduce...

Simply wrap the powergrid button inside a form, and on click any button/action buttons/bulk action buttons, form submits.

Bulk Action button used attached below.

Extra information

<?php 
public function header(): array
    {
        if(!$this->type)
        {
            return [
                Button::add('bulk-complete-order')
                    ->slot(__('批量选择物料明细'))
                    ->class('inline-flex items-center bg-gray-600 cursor-pointer text-white px-3 py-2.5 m-1 rounded text-sm')
                    ->dispatch('bulkSelectPuchaseDetails', []),
            ];
        }
        else
        {
            return [];
        }
    }
?>

[luanfreitasdev]

I didn't understand what the problem was. Could you show a screenshot, video, or generated HTML code and what error occurred?

Make sure to remove published views too

Thanks

[kuratsunade]

Nevermind, thanks for the reply. I took some time read through the code and figured out V5, Button class is unified to the header actions so I can use the custom blade component instead for bulk action as well.

I was able to resolve by passing a custom blade component to counter the issue.

The issue exists on both V4 and V5, which lies under how the button was rendered.

When a button is rendered, the code result:

<button wire:click="$dispatch('bulkSelectPuchaseDetails', [])" class="inline-flex items-center bg-gray-600 cursor-pointer text-white px-3 py-2.5 m-1 rounded text-sm">RENDERED BUTTUN</button>

Now, when wrap the Powergrid table within a form, it becomes:

<form action="/such-such" method="post">

<!-- begin of powergrid -->
<!-- yada yada yada rendered by powergrid -->
<button wire:click="$dispatch('bulkSelectPuchaseDetails', [])" class="inline-flex items-center bg-gray-600 cursor-pointer text-white px-3 py-2.5 m-1 rounded text-sm">RENDERED BUTTON</button>
<!-- yada yada yada rendered by powergrid -->

<!-- and more actions buttons rendered by powergrid, same way as above -->
<!-- end of powergrid -->

<button type="submit">My actual submit button</button>
</form>

So, when any rendered button was clicked, due to lack of the type attribute of all the buttons, the form submits on click, which is a unexpected behavior.

By adding type attribute into the rendered button, the form behaves normally, submits only on the actual submit button.