mulitpart-form hx-post not making request if onclick eventlistener disables button

[foprel]

Hello,

I'm creating an multipart upload form using htmx and Flask. The user can upload a document to a Flask endpoint, which will then process the document and redirect once the processing has finished. In the meantime I want to display a bootstrap loading spinner on submit button. However, I noticed that if I add an onlclick event listener to disable the button while loading, htmx does not POST the form to Flask:

HTML:

<form id="form" hx-encoding="multipart/form-data" hx-post="/upload">
  <div class="mb-3">
      <input type='file' name='file' class="form-control">
  </div>
  <button class="btn btn-primary" id="submitButton">
      <span class="spinner-border spinner-border-sm d-none" id="buttonSpinner" role="status" aria-hidden="true"></span>
      <span id="buttonText">Convert</span>
  </button>
</form>

Javascript:

window.onload=function(){

    var submitButton = document.getElementById("submitButton");
    var buttonSpinner = document.getElementById("buttonSpinner");
    var buttonText = document.getElementById("buttonText");

    submitButton.addEventListener("click", (e) => {
        buttonText.innerHTML = "Converting";
        buttonSpinner.classList.remove("d-none");
        buttonSpinner.classList.add("d-inline-block");
        submitButton.disabled = true;
    });
};

It seems to be an issue with the order of execution of htmx and my custom JavaScript. Hope someone can identify the issue and see whether it's a problem with htmx.