[🐞] using useOnDocument or useOnWindow doesnt work properly if the component only returns a Slot

lindblom commented 1 month ago

Which component is affected?

Qwik Runtime

Describe the bug

This component only works if its on the page initially loaded, not if i reach it by SPA routing.

const DocExp = component$(() => {
  useOnWindow(
    "keydown",
    $((ev) => {
      console.log("keydown", ev.key);
    }),
  );

  return <Slot />;
});

If i were to add a wrappeing div like this it will work as I expect:

const DocExp = component$(() => {
  useOnWindow(
    "keydown",
    $((ev) => {
      console.log("keydown", ev.key);
    }),
  );

  return <div><Slot /></div>;
});

I dont know if this is a bug or if its by design, but i suspect its not how its supposed to be. :)

Reproduction

https://stackblitz.com/edit/github-qb52m7?file=src%2Froutes%2Fdemo%2Fflower%2Findex.tsx

Steps to reproduce

It doesnt reproduce on stackblitz, but download the project and start it using npm install && npm run dev.

Load start page
Go to flowers page by the Flower link (SPA navigation)
open console
press some keys on the page
check console see that nothing is logged (probably a bug)
reload the page
press some keys
see that its logging (what is expected to happen every time)

System Info

System:
    OS: macOS 15.0
    CPU: (8) arm64 Apple M3
    Memory: 210.59 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.16.0/bin/yarn
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
  Browsers:
    Chrome: 128.0.6613.139
    Safari: 18.0
  npmPackages:
    @builder.io/qwik: ^1.7.3 => 1.9.0 
    @builder.io/qwik-city: ^1.7.3 => 1.9.0 
    typescript: 5.4.5 => 5.4.5 
    undici: * => 6.19.8 
    vite: ^5.2.10 => 5.4.7

Additional Information

No response

wmertens commented 1 month ago

Actually it works for Slot but not when returning something that can't get attributes. For Slot it will render a script element that has the q: prop with the information for qwikloader. You can see this in the HTML tab.

https://qwik.dev/playground/#f=Q0o0xoZm8IgCyiMSgA6QB0rLIBopwYK4QDlK0xRyFgA7Tz07tRLIyVMHWQC0QkMjtQyuGgSQ63WEYoXUMj0gB%2BgtkJpaTYgXgSSwvgFWCeX5eeogsgjYZkhTKAeVp%2BAYSFQA5R9g3k1JVcgHFpvAYhSiByqvBC54ivNzU0sygIlCCSkXgMIEGMKQxK%2BgMJr8h17yBwA

In v2 it behaves the same currently.

I think that indeed, this is a bug. The use of elements to communicate with qwikloader is an implementation detail and shouldn't impact useOnDocument.

JerryWu1234 commented 1 month ago

@wmertens Can this be fixed? just curious

QwikDev / qwik