// index.tsx
import { clientOnly } from "@solidjs/start";

const Foo = clientOnly(() => import("../components/Foo"));

export default function Home() {
    return (
        <>
            {/* <form> */}
            <Foo />
            {/* </form> */}
            {/* <form> */}
            <Foo />
            {/* </form> */}
        </>
    );
}

// index.tsx
import { clientOnly } from "@solidjs/start";

const Foo = clientOnly(() => import("../components/Foo"));

export default function Home() {
    return (
        <>
            {/* <form> */}
            <Foo />
            {/* </form> */}
            {/* <form> */}
            <Foo />
            {/* </form> */}
        </>
    );
}

// foo.tsx
import { Show, createEffect, createSignal } from "solid-js";

export default function Foo() {
    const [foo, setFoo] = createSignal<HTMLDivElement | null>(null);
    const isFormControl = () => (foo() ? Boolean(foo()!.closest("form")) : true);

    console.log(isFormControl());
    createEffect(() => {
        console.log(isFormControl());
    });

    return (
        <>
            <div ref={node => setFoo(node)}>hello world</div>
            <Show when={isFormControl}>
                <div>hello world 2</div>
            </Show>
        </>
    );
}

// foo.tsx
import { Show, createEffect, createSignal } from "solid-js";

export default function Foo() {
    const [foo, setFoo] = createSignal<HTMLDivElement | null>(null);
    const isFormControl = () => (foo() ? Boolean(foo()!.closest("form")) : true);

    console.log(isFormControl());
    createEffect(() => {
        console.log(isFormControl());
    });

    return (
        <>
            <div ref={node => setFoo(node)}>hello world</div>
            <Show when={isFormControl}>
                <div>hello world 2</div>
            </Show>
        </>
    );
}