You can check out this answered StackOverflow question to understand how event propagations in forms work:

Why does the form submit event fire when I have stopped propagation at the submit button level?

But here's a short explanation of why you're having this issue:

So the behavior you’re seeing is intentional. submit is not a “normal” bubbling event like click. In the HTML specification, submit is dispatched by the form element itself when a submission is triggered (by pressing Enter in a text input, clicking a submit button, or calling form.requestSubmit()), not as a result of bubbling from a descendant.

When you call:

input.dispatchEvent(new Event("submit", { bubbles: true }));

on a descendant element inside a <form>, the event may be retargeted or only seen by the form, depending on the browser’s implementation. That’s why you only see the FORM submit log. The event isn’t flowing “naturally” through the DOM from the span the way a click event would.

Cheers! Hope this helps, happy building!