#Event listener not firing inside <Show>?

3 messages · Page 1 of 1 (latest)

winged quarry
#

I have a dummy component that has two buttons with onclick listeners.

One is wrapped in a <Show> that awaits some serverside data. The other one is not.

The onlick listener outside the <Show> works as expected. The button inside the <Show> renders, but doesn't do anything. What's going on?

export default function WidgetPage() {
    const widgets = createServerData$(someFunction)
    const inner = () => console.log("inner")
    const outer = () => console.log("outer")

    return (
        <>
            <Show when={widgets()} fallback={<p>Loading.</p>}>
                <button onClick={inner}>INNER</button>
            </Show>
            <button onClick={outer}>OUTER</button>
        </>
    )
}
winged quarry
#

Ugh... this one might be specific to my project setup. The someFunction makes a call to Cloudflare. If I remove the Cloudflare stuff from the project and just return an object literal instead, everything works fine.

wooden spruce
#

Try calling widgets in the top level of the function