qwik
qwik copied to clipboard
Published
20 hours ago •
QwikDev
QwikDev
on:qvisible doesn't work on invisible elements like <head>
Qwik Version
0.0.100
Operating System (or Browser)
Chrome
Node Version (if applicable)
No response
Which component is affected?
Qwik Runtime
Expected Behaviour
Having a component like this one:
import { component$, useClientEffect$ } from '@builder.io/qwik'
export default component$(() => {
useClientEffect$(() => {
console.log('foo')
})
return (
<></>
)
})
And calling it inside head.tsx component doesn't work as expected because it produces:
<head q:id="2" q:head on:qvisible="/src/head_component_useclienteffect_euppxjgcjwg.js#_hW[0]">
Which means on:qvisible will never execute because head is not a visible element.
The workaround is:
useClientEffect$((track) => {
//...
}, { eagerness: 'load' })
But i'm opening the issue as requested:
manucorporat — Today at 1:33 PM
This is an actual issue, we are appending a visibility event to head, qwik should be smart to print a warning or automatically use load in this scenario
Actual Behaviour
.
Additional Information
No response
