New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Bug in New script.bundle.js Breaks Stepper Submit Functionality


Bug in New script.bundle.js Breaks Stepper Submit



Hi Metronic Team,

The stepper’s submit button (data-kt-stepper-action="submit") in the latest script.bundle.js (Metronic v8.3.1, Demo 1, Gulp) doesn’t trigger form submission. No POST request is sent, and no console errors appear.

Issue: The new script.bundle.js unconditionally applies e.preventDefault():


the.submitListener = function (e) {
e.preventDefault();
KTEventHandler.trigger(the.element, "kt.stepper.submit", the);
};


The old version checked for data-kt-stepper-submit="true":


if (the.element.getAttribute("data-kt-stepper-submit") === "true") {
the.submitListener = function(e) {
e.preventDefault();
KTEventHandler.trigger(the.element, "kt.stepper.submit", the);
};
}


Workaround:


stepper.on("kt.stepper.submit", function (stepper) {
document.querySelector("#myFormId").submit();
});
  • or remove data-kt-stepper-action="submit" from button


    • Is this a known bug?
    • Please fix the stepper to submit forms correctly.
    • Update stepper docs if needed.



    Details:
    • Tested with basic stepper example.
    • Reverting to old script.bundle.js works.



    Thanks,<br>
    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 (3)


    Hi

    The issue is that the current KTUI stepper component only handles basic navigation (next/back) and completely lacks submit button support. Here's how to fix this:

    Immediate Workaround (Recommended):

    // Listen for stepper submit events and manually submit the form
    const stepper = document.querySelector("[data-kt-stepper]");
    stepper.addEventListener("kt.stepper.submit", function(event) {
    const form = document.querySelector("#yourFormId");
    if (form) {
    form.submit();
    }
    });


    Alternative Workaround:
    Remove data-kt-stepper-action="submit" from your submit button and use a regular form submit button instead.

    The current KTUI stepper implementation only looks for [data-kt-stepper-next] and [data-kt-stepper-back] elements but doesn't handle submit buttons. The old Metronic v8 stepper had proper submit handling that triggered kt.stepper.submit events.

    For a permanent fix, this requires updating the KTUI stepper component. We will consider adding it.

    Thanks



    Hi,

    Noted, we will double check it. May I know which Metronic version 8.x are you using ?

    Regards,
    Sean



    Hi, I'm using 8.3.1 (upgraded it from 8.2.5)
    Regards


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