Modal is opening on twice click

[zeeshantariq08]

Package

Actions

Package Version

v3.0.0

How can we help you?

i have to show modal before saving the information , so i have added the requireConfirmation , so the modal is appearing on twice clicking the button

Action Button:
``
public function publishAction(): Action
{
return Action::make('publish')
->requiresConfirmation()
->modalHeading('Do you want to request?')
->modalDescription('')
->afterFormFilled(function () {

	})
	->form([
		Forms\Components\Actions::make([
			Forms\Components\Actions\Action::make('not_applicable')
			->action(function () {
			$data = $this->form->getRawState();
			$data['not_application'] = true;
			$data['request_aligned'] = false;
			$data['aligned_in_previous'] = false;

			$this->create($data);
			}),

		])
	])
	->modalSubmitAction(false)
	->modalCancelAction(false);

}
``

[zeeshantariq08]

@leandrocfe ?

[leandrocfe]

Did you follow this section?
https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component#adding-the-action

[zeeshantariq08]

yes

[leandrocfe]

Can you share the whole code?

[zeeshantariq08]

on first time click it gives this error @leandrocfe
VM5108:21
Uncaught TypeError: Cannot read properties of undefined (reading 'dispatchEvent')
at eval (eval at safeAsyncFunction (livewire.js?id=cc800bf4:1176:21), :21:43)
at livewire.js?id=cc800bf4:1521:9
at releaseNextTicks (livewire.js?id=cc800bf4:1529:24)
at livewire.js?id=cc800bf4:1516:9

[leandrocfe]

Are you able to create a repo on github to reproduce this issue?

[Akhmami]

I got the same problem, the modal action only appears on the second click. Is there any solution for this?

[izzatrazab]

@Akhmami did you wrap it inside a form element ? Same thing happened to me. I used a filament table (as livewire component) inside a form element. Any action modals of the tables won't appear on first click. In console, I got the same error as @zeeshantariq08 mentioned. When I checked the elements in dev tools. It seems that the element tree is messed up (after adding the filament component). It even kicked out an another element (another input element within the form) outside the form element. I fixed this by replacing the form element with div. Though submitting the "form" still works (using wire:click on a save() function), the semantic is gone.
@leandrocfe, I am sorry as I am not able to provide repo to duplicate this as time does not permits. But have you ever encountered this issue before ?

it happens when I do this (take note these is inside a normal blade view directly rendered in a controller):

        <form wire:submit.prevent='save' class="space-y-3">

            <div class="py-3">
                <livewire:admin.votes.data-table.application-vote-offer-data-table :$vote
                    wire:key="application-vote-offer-2" />
            </div>
            <div>
                this element got kicked out of the form element after rendered
            </div>

        </form>

this works:

        <div class="space-y-3">

            <div class="py-3">
                <livewire:admin.votes.data-table.application-vote-offer-data-table :$vote
                    wire:key="application-vote-offer-2" />
            </div>
            <div>
                this element does not kicked out of the form element after rendered
            </div>

        </div>

@leandrocfe Please let us know your thoughts

[zeeshantariq08]

Thanks!

[leandrocfe]

I think replaceMountedAction is a better approach if you want to show a modal before saving a modal form.

[Akhmami]

@izzatrazab that's right, I wrapped it inside a form element using a placeholder component. if I change the form tag to div, won't wire:submit be executed?

[izzatrazab]

ur welcome