10 months ago

When submitting a form with Livewire, you probably want to render out some error messages and show them to your user. A nice enhancement is automatically scrolling to the first error message on the page. First, make sure that the element that renders the error message has some sort of "marker" class or data attribute that marks it as an error message.

Livewire.hook('commit', ({ succeed }) => { succeed(() => { setTimeout(() => { const firstErrorMessage = document.querySelector('.error-message') if (firstErrorMessage !== null) { firstErrorMessage.scrollIntoView({ block: 'center', inline: 'center' })} }, 0)})})

Then on the next tick in the event loop, you can check for an error message element and scroll it into view.