Resend method fires twice

I have this resend button in a user form that sends an invitation mail again. However, the email gets sent twice. Why?

<x-icon-link wire:click.prevent="resend({{ $teamUser->id }})"
                                                 icon="envelope"
                                                 class="cursor-pointer !text-accent hover:!text-accent-dark"
                                                 wire:loading.attr="disabled"
                                    />

The resend method:

public function resend(int $id)
    {
        \Log::info('Resend method triggered', ['id' => $id]);
        $teamUser = TeamUser::where('id', $id)->firstOrFail();
        $user = User::findOrFail($teamUser->user_id);
        $teamUser['token'] = Str::random(32);
        $teamUser->save();
        $teamUserInviter = TeamUser::where(['team_id' => Auth::user()->team_id, 'user_id' => Auth::id()])->firstOrFail();
        Notification::route('mail', $user->email)->notify(new SendInvitationNotification($user, $teamUser,$teamUserInviter));
        \Log::info('Invitation sent to '.$user->email.'/'. $teamUser->initials.'/'. $teamUserInviter->initials);
        $this->flash('success', __('User successfully invited again'), [
            'timer' => 3000,
            'toast' => true,
        ]);
    }

The log:

[2025-01-26 11:00:59] local.INFO: Resend method triggered {"id":9} 
[2025-01-26 11:01:02] local.INFO: Invitation sent to [email protected]/iopi/M1  
[2025-01-26 11:01:02] local.INFO: Resend method triggered {"id":9} 
[2025-01-26 11:01:02] local.INFO: Invitation sent to [email protected]/iopi/M1

LaryAI

1 year ago

Level 58

The issue you're experiencing, where the resend method is triggered twice, is likely due to multiple event listeners or actions being bound to the same event. This can happen in Livewire components if there are multiple elements or actions that inadvertently trigger the same method.

Here are a few steps to troubleshoot and resolve the issue:

Check for Duplicate Event Listeners: Ensure that there are no duplicate event listeners or bindings in your Livewire component that might be causing the method to fire twice.
Inspect the Blade Template: Make sure that the wire:click directive is not being applied to multiple elements unintentionally. Double-check your Blade template to ensure that the resend method is only being called once per user action.
Prevent Default Behavior: You are already using wire:click.prevent, which is good. This prevents the default action of the click event, but ensure that there are no other JavaScript or Livewire interactions that might be causing the method to trigger twice.
Check for JavaScript Interference: If you have any custom JavaScript that interacts with the Livewire component, ensure that it is not causing the method to be called multiple times.
Livewire Component Lifecycle: Ensure that the Livewire component is not being re-rendered in a way that causes the method to be called twice. This can happen if there are multiple Livewire components on the page that might be interacting with each other.
Debugging: Add additional logging or debugging statements to see if there are any patterns or specific conditions under which the method is called twice.

Here's a refined version of your Blade component to ensure it's set up correctly:

<x-icon-link 
    wire:click.prevent="resend({{ $teamUser->id }})"
    icon="envelope"
    class="cursor-pointer !text-accent hover:!text-accent-dark"
    wire:loading.attr="disabled"
/>

If after checking all these points the issue persists, consider isolating the problem by creating a minimal version of the component and method to see if the issue still occurs. This can help identify if the problem is with the specific setup or something else in your application.

muuucho

1 year ago

Level 11

After having done pretty much all that, the problem remains. Also, SendInvitationNotification is used elsewhere (Not in a Liwewire component but in an ordinary Laravel Controller) and there it doesn't run twice.

Sinnbeck

1 year ago

Level 102

It might help if we can see the full component

Please or to participate in this conversation.