[🐞] onSubmit$ form handler not preventing default

[richardtorres314]

Which component is affected?

Qwik Runtime

Describe the bug

The onSubmit$ event handler on a form is not respecting preventDefault. For example, in the form below:

<form
  onSubmit$={$((event) => {
    event.preventDefault();
    console.log('default prevented');
  })}
>
  <button type="submit">Hello World</button>
</form>

Expected Results

The form should not be submitted and the console should print "default prevented".

Actual Results

The form is submitted, the default action on the event is never prevented, and nothing is printed to the console.

Reproduction

https://stackblitz.com/edit/github-etyhm2js-2mqst9no?file=src%2Froutes%2Findex.tsx

Steps to reproduce

1. Create an HTML form that has an onSubmit$ handler.
2. Within the form onSubmit$ handler, define the handler as:

$((event) => {
  event.preventDefault();
  console.log('default prevented');
}

3. Add a button of type submit within the form.
4. Click the button to submit the form.

System Info

System:
  OS: Linux 5.0 undefined
  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 18.20.3 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.2.3 - /usr/local/bin/npm
  pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
  @builder.io/qwik: ^1.7.3 => 1.12.0 
  @builder.io/qwik-city: ^1.7.3 => 1.12.0 
  typescript: 5.4.5 => 5.4.5 
  undici: * => 7.2.0 
  vite: ^5.2.10 => 5.4.11

Additional Information

No response

[maiieul]

Hi @richardtorres314, have you tried using sync$? This is likely what you're looking for here.

[maiieul]

I will close for now as this shouldn't be an issue with sync$. Feel free to re-open an issue if sync$ doesn't work for your use-case.