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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (12)

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 happy

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 happy

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 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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(