SolidJS•2y ago

onClick event not appearing in DOM

Hi I have my Popup component as child to my Modal component. I would like to set an onClick event on my Popup component to stop propagation of the click event up to the Modal component. However, the click event does not appear in the DOM at all. I have no clue how to debug this. Does anybody know what is going on? My Popup component:

export function Popup({
  className,
  title,
  subheader,
  fields,
  footerContent,
  close,
  isMobile,
  ...props
}: PopupProps) {
  const baseClass = [styles.main, "hi"];
  if (className) baseClass.push(className);

  const c = children(() => props.children);

  return (
    <div class={baseClass.join(" ")} onClick={(e) => e.stopPropagation()}> // this click event does not show up in the dom
      <header>
        <h3>{title}</h3>
        <Show when={subheader}>
          <div class="subheader">
            <span>{subheader}</span>
          </div>
        </Show>
        <IconBtn icon={<CloseSvg />} onClick={close} className="close-btn" />
      </header>
      <Show when={fields}>
        <Form fields={fields} close={close} {...props} />
      </Show>
      <Show when={props.children}>
        <>
          <div class="content">{c()}</div>
          {footerContent && <footer>{footerContent}</footer>}
        </>
      </Show>
    </div>
  );
}

export function Popup({
  className,
  title,
  subheader,
  fields,
  footerContent,
  close,
  isMobile,
  ...props
}: PopupProps) {
  const baseClass = [styles.main, "hi"];
  if (className) baseClass.push(className);

  const c = children(() => props.children);

  return (
    <div class={baseClass.join(" ")} onClick={(e) => e.stopPropagation()}> // this click event does not show up in the dom
      <header>
        <h3>{title}</h3>
        <Show when={subheader}>
          <div class="subheader">
            <span>{subheader}</span>
          </div>
        </Show>
        <IconBtn icon={<CloseSvg />} onClick={close} className="close-btn" />
      </header>
      <Show when={fields}>
        <Form fields={fields} close={close} {...props} />
      </Show>
      <Show when={props.children}>
        <>
          <div class="content">{c()}</div>
          {footerContent && <footer>{footerContent}</footer>}
        </>
      </Show>
    </div>
  );
}

My Modal component:

export function Modal(props: ModalProps) {
  createEffect(function addCloseEventToModal() {
    const modal = document.getElementById("modal") as HTMLDialogElement;
    modal.onclick = () => {
      props.close();
      modal.close();
    };
  });
  const c = children(() => props.children);
  return (
    <Portal mount={document.querySelector("#modal") as Element}>{c()}</Portal>
  );
}

export function Modal(props: ModalProps) {
  createEffect(function addCloseEventToModal() {
    const modal = document.getElementById("modal") as HTMLDialogElement;
    modal.onclick = () => {
      props.close();
      modal.close();
    };
  });
  const c = children(() => props.children);
  return (
    <Portal mount={document.querySelector("#modal") as Element}>{c()}</Portal>
  );
}

4 Replies

Alex Lohr•2y ago

Solid uses deferred events. Just set a breakpoint in the handler.

north korean supermarketOP•2y ago

the handler doesn't run at all

mdynnl•2y ago

https://playground.solidjs.com/anonymous/ebdab22a-2b62-44a5-aa3b-9c8e9bf9dad0 solid's delegated events wouldn't have a chance to run at all, if the modal onclick removes the node

north korean supermarketOP•2y ago

i see thank you

Gaming

Programming

onClick event not appearing in DOM