Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ctrlaltdelme's avatar

Input taking 1-2 seconds to register click before livewire/update is called?

From what I can tell, every so often, this happens on any of the few Livewire components in a show page where I'll click on the input, wait a second or two, then see the update event fire then the icon updates very shortly after. The time between the Livewire update event and my DOM updating isn't the problem. I'm wondering why it's taking so long for the click event to even register. It's not even like I'm misclicking or need to click again. One click is all it takes, but it's click...one...two...UPDATE..done. Does anyone have any ideas why? We can use literally just any of the components, so here's one.

<div>
    <label class="block text-sm text-primary-400 mb-1">Watchlist</label>
    <div class="relative flex items-center group">
        <div class="cursor-pointer " wire:click.prevent="toggleWatchlist">
            <x-icon-clock
                class="w-10 h-10 hover:text-primary-400 transition-colors {{
                $isWatchlisted ? 'fill-primary-500 stroke-current text-zinc-950' : 'fill-none text-primary-500'
                 }}"/>
        </div>
    </div>
</div>
0 likes
4 replies
jj15's avatar

I haven't experienced this issue with any of my Livewire components. While I don't mean to be redundant, are you sure it's not actually the request taking a moment? If you look in the "Network" tab of your browser developer tools, you should see the request fire off right when you click it, but the response time will of course dictate how quickly you'll see the DOM get updated.

jj15's avatar

@ctrlaltdelme I see now, that is quite interesting. It should be firing right away as far as I know. The debugbar shows the Livewire request taking 187ms which is pretty fast, so maybe you're right about the click handler being delayed for some reason.

You could maybe try removing the .prevent modifier from the wire:click directive since it's not needed (clicking a <div> has no default behavior to prevent). It could be triggering some weird issue internally.

Other than that, I'm sorry that I don't have any more helpful information to share. I've run into similar unexplainable issues with Livewire and Alpine.js before so I can understand the frustration.

1 like

Please or to participate in this conversation.