Invalid elements allow trigger inline submit handlers and preact submit handlers

[enjoythelive1]

The issue is that these listeners are registered before the polyfill has time to register its own listener to stop the propagation of the submit event.

Here I include 3 reproductions:

• Inline listener in the html: https://plnkr.co/edit/RMzepi3OuFHIfRu2
• Inline listener, but programatically: https://plnkr.co/edit/kv5GKJpwUvG2c20q
• Preact: https://jsitor.com/DwDrFShze

[calebdwilliams]

This is partially resolved in element-internals-polyfill@0.1.43. I'm afraid I don't know enough about how Preact handles the onSubmit event to know how to get around that particular issue.

@enjoythelive1, would you have any idea how to access that callback function (or know anyone who might)? I'm guessing it's in Preact's internals and we might be out of luck there.

[enjoythelive1]

I think it has to do with how the vdom renders the components. The listeners to the form are attached before the polyfill can attach them, because the custom elements are instantiated after the form was instantiated with its own properties.

I think we need to catch the event before the target phase of it ('using capture'). Maybe a listener with useCapture=true at the root node of where the form is located. Having that one listener would intercept all submit events and be able to stop propagation ASAP. Even before the target fase, and that would also simplify the logic you used to store all the inline listeners of forms.

I would implement it my self, but I do't know my way around your test suite.

[calebdwilliams]

Yeah, that's exactly it. It looks like I'll have to patch document.createElement to get this to work properly (working example here). I'm not entirely sure I like this approach, but I'm still thinking about it.

[sipris]

This issue is still a thing. Run this example (before fix) in Safari or overwrite the function isElementInternalsSupported.

function isElementInternalsSupported() { return false; }

This example shows that the submit event handlers added to the form programmatically can submit data even if the form is invalid.

To prevent this, we should listen to the submit events on the submit button and prevent default handling. This example (with fix) does precisely this. PR is coming.

[calebdwilliams]

Should be fixed in element-internals-polyfill@1.1.13. Thanks @sipris!