[🐞] Event handlers either disappearing or included twice depending on the component JSX

jwickers commented 1 year ago

Which component is affected?

Qwik Runtime

Describe the bug

There is a weird interaction between component event handlers like useOn, useOnDocument or useOnWindow and the JSX structure.

Reproduction

You can see this stackblitz as well: https://stackblitz.com/edit/qwik-starter-mkqcen?file=src%2Froutes%2Findex.tsx

Press any key on the page to start and see both components render the events counts. Press the escape key to switch the component render which changes the behavior.

BUG 1

When the component renders fragment, Qwik places a <script type="placeholder" tag with the Qwik event handlers (like on-document:xxx). If the component changes to render a DIV for example, that placeholder is removed and the DIV now has the event handlers. So far so good. But if the component renders back to a fragment then the DIV is not replaced back with a placeholder tag thus losing the event handlers altogether.

BUG 2

An easy workaround seems to be to avoid using a fragment as root in the JSX and say wrap the whole component in a DIV. But when the component changes to render an inner DIV, that inner DIV then also gets the event handlers, causing those events to be processed twice.

Reproduction

https://github.com/jwickers/qwik-useon-events-bug

Steps to reproduce

Run npm install and npm run start.

System Info

System:
    OS: macOS 13.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 36.66 GB / 64.00 GB
    Shell: 5.9 - /usr/local/bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Brave Browser: 114.1.52.122
    Chrome: 114.0.5735.106
    Edge: 114.0.1823.37
    Firefox: 92.0
    Firefox Developer Edition: 109.0
    Safari: 16.4
  npmPackages:
    @builder.io/qwik: ^1.1.5 => 1.1.5
    @builder.io/qwik-city: ^1.1.5 => 1.1.5
    undici: 5.22.1 => 5.22.1
    vite: 4.3.9 => 4.3.9