preventDefault() handling -- abstraction needed for Qwik support?

[gabrielgrant]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Preact
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/playground/?code=KYDwDg9gTgLgBAE2AMwIYFcA29noHYDGMAlhHnALICeAwhALaR7B4wAUAlHAN4BQccXIRJk4AC1R4EmYAGV0AI3rF2wAG4sYALjjylKgKIbWXPgIHrNAOjBRLrACIoM2TgG5e%2FcwTIBnHND0cAC8cPYwVjCoUADmwPCovnAAEgAqFAAyAGKBBjL0mh7mcMTIcGwAhMiBVgRiwAQA1gBqqJjECCpUnKZexW3AsGwA5DlQQcRJxHhqbR3DHEXFcHYw6FB4SwIAvn1wPnj%2BiKhRIXDMAO5wY%2FQOJ6hs1eOLewdHwPSoxJhnCPdWcXYww%2BX0wCy2%2Bz8EBkVkwEBibBB3xeO08AlW63IbD2AB4nkEyHplDBgtxEcYYFxggA%2BcSSaRyRTE8maDjbal7AQ46ZgdDwGBUMDAYIAIiRmBF51QBVF4sldgAjuhiHYEHAAPQc5ZwHEKPkwUQCoWi3xMlQi6lElQ49V6mAGvBa8w2%2FFOl7bIA%3D%3D%3D

Expected Behaviour

Multi-framework support for preventDefault()

Actual Behaviour

The docs recommend using event.preventDefault() directly in event handler code. When doing so, the generated Qwik component uses preventDefault() in a QRL-wrapped (ie async) function, which doesn't work

Additional Information

This example is taken directly from the docs:

https://mitosis.builder.io/docs/using-libraries/#focus-on-web-fundamentals

It seems to be the only mention of preventDefault() anywhere in the docs

[dumko2001]

Instead of:

function handleSubmit(event: SubmitEvent) {
  event.preventDefault();
  // ... rest of the handler
}

return (
  <form onSubmit={(event) => handleSubmit(event)}>
    {/* ... */}
  </form>
);```

You would modify the Qwik component's template to include the declarative attribute:

```html
<form preventdefault:submit onSubmit$={(event) => handleSubmit(event)}>
  {/* ... */}
</form>


And the handleSubmit function would no longer need the event.preventDefault() call:
function handleSubmit(event: SubmitEvent) {
  // ... rest of the handler,
}