Vue: 2.6+ Custom button component kills a form's submit event

[andreasvirkus]

Version

2.6.2

Reproduction link

https://codesandbox.io/s/738680jm5q

Steps to reproduce

When you have a custom button component inside a native form element, it seems to (now) kill or suppress the native submit event of the form.

What is expected?

Clicking the button (or submitting the form in other manners, e.g. having focus on a text input and pressing enter) should trigger the form's native submit event.

What is actually happening?

There's a click event triggered on the button, but the form's submit event does not trigger.

---

It works with versions prior to 2.6 (e.g. switch to 2.5.22 in the Codesandbox repl and the repl will start working as expected).

[posva]

Please provide boiled down repro not your whole button component

[andreasvirkus]

Sorry, I've skimmed off the fat.

It's now evident that the form submit event no longer triggers when the button is disabled after submitting a form/clicking the button.

The weird part is that this also affects the submit event even when the button itself isn't clicked (ie an enter keyup event on the text field) and yet a click event is triggered on the button.

[posva]

Cannot check more right now but it may be related to the changes in micro/macro task. The button is being disabled before the submit event is able to trigger. I haven't tried to reproduce with vanilla js but it's probably the same problem. As a workaround you can delay disabling the button with a setTimeout of 0 but you should disable it on the form submission not the click

[yyx990803]

This is indeed related to the microtask revert (more details here) - the event is killed due to your preventMultipleSubmits method, as with a microtask, it causes the button to be natively disabled before the event can bubble to the form. This would have the same problem if updates are synchronous.

The solution is wrapping your preventMultipleSubmits logic in a setTimeout(..., 0).

[guidobouman]

~This feels very much like a breaking change between 2.5 & 2.6. A simple disabled state based on a vue prop would not block the form submit in 2.5. Now it does.~ Oh, this behaviour was unique to 2.5, never mind.

Disabling the button on the actual form submit instead of the button click feels like a more solid approach, indeed.