KTStepper with Laravel Livewire
Hi,
I am trying to use the KTStepper with laravel livewire.
I have a stepper livewire component which includes the stepper and a script to initialize the stepper.
That livewire component is used inside my blade.
The problem: Every time I enter something in an input, the stepper refreshes and loads completely new (jumps back to first step).
I tried to use the wire:ignore attribute on the root element of the stepper. That solves the re-initialisation problem but other elements inside the steps also don't refresh anymore.
Is there any good solution to this?
Best regards,
Sebastian
Replies (13)
I forgot to add some code.
Maybe the code can help to identify the issue.
stepper.blade.php (Livewire Component):
https://pastebin.com/915PwcHk
Stepper.php (Livewire Component):
https://pastebin.com/b3dAuv22
I hope that helps 
Hi Sebastian,
Does the refresh only happen on the stepper component or the whole page?
This could be related.
https://laracasts.com/discuss/channels/livewire/prevent-livewire-to-constantly-refresh-page-but-still-update-data-values
Thanks
Hi Faizal,
Thank you for the answer.
I think that the link you posted is not working, I get a 404 error.
But to answer your question: Only the stepper is refreshed an not the whole page. It's basically re-rendering the component every time I change something.
Best regards
Sorry for the wrong link. Here is the right one.
https://laracasts.com/discuss/channels/livewire/prevent-livewire-to-constantly-refresh-page-but-still-update-data-values
Thanks
Hi,
unfortunately that does not prevent the issue from happening.
I added "wire:key" to the steps and the root element.
Any other ideas?
Have you tried to use data binding for the text input? So the input text data is kept in the state even when the component is refreshed.
https://laravel-livewire.com/docs/2.x/data-binding
Thanks
Hi, that is actually the general issue.
If I use data binding and some input changes, a livewire request is sent to the server and leads to a refresh of the component.
That refresh re-initializes the stepper and the stepper goes back to step 1.
I'm sorry if my issue was not clearly described by me
Maybe I can upload a short video which demonstrates the issue.
Best regards
Here is a link to two videos which explain the issue.
As you can see in the "Issue Demonstration.mp4", the stepper gets re-initialized every time I change something in the input.
https://drive.google.com/drive/folders/1Qk8uZwRZOt6GANUP8CkV-ZrizXSYPR-l?usp=sharing
Hi Sebastian,
Maybe we can try to use the Livewire listener to capture the refresh event.
Whenever the component is going to refresh/rerender, use the stepper JS function to get the current stepper page number getCurrentStepIndex before it gets reset, then use goTo(page) to the previous page number.
This code needs to be in the JS in the KTStepper init code.
Thanks
The code is running now and the jumping to the first step is resolved.
That is the code in the _init function:
// Handle livewire events
Livewire.hook("message.processed", (message, component) => {
// This is needed because the stepper component is reset when the livewire component is updated
// Prevents the stepper from jumping to the first step
// Check if the component contains the stepper
if (component.el.contains(the.element)) {
// Go to the old step
_goTo(the.currentStepIndex);
}
});Thank you for the help!
Hi Sebastian!
Have the same problem right now. Where exactly should I paste this code for the KTStepper to stop rewinding once I edit a form field?
Is it somewhere in my JS file where I have the stepper logic or the main global stepper.js file in the src?
Thanks in advance,
Mati
Hi Faizal,
could you maybe provide an example?
I am not quite sure where to put the listener.
Best regards
Sebastian
Great! Seems like the listener on the event of message.processed looks great. Hope your solution can help others as well.
Thanks
