modus-modal-implementation-solidjs

ModusWcModal Implementation in SolidJS

🚨 CRITICAL: Modal Method Access Issue

Problem: The ModusWcModal component's showModal() and close() methods are not directly available on the component reference in SolidJS.

Root Cause: Modus Web Components use shadow DOM, and the modal methods are on the inner native <dialog> element, not the component itself.

Official Documentation: According to the official Modus documentation, modals are controlled with direct method calls (showModal() and close()) on the modal element, not through SolidJS state management.

❌ Common Anti-Patterns

❌ Direct Method Access (Won't Work)

// ❌ WRONG: Direct method access on component
function ModalComponent() {
  let modalRef: ModusWcModal | undefined;

  const openModal = () => {
    if (modalRef) {
      modalRef.showModal(); // ❌ This won't work
    }
  };

  const closeModal = () => {
    if (modalRef) {
      modalRef.close(); // ❌ This won't work
    }
  };

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <ModusWcModal ref={(el) => (modalRef = el)}>
        <div slot="header">Modal Header</div>
        <div slot="body">Modal Body</div>
        <div slot="footer">
          <button onClick={closeModal}>Close</button>
        </div>
      </ModusWcModal>
    </div>
  );
}

❌ Trying to Control Modal State from SolidJS

// ❌ WRONG: Trying to control modal state from SolidJS
function ModalComponent() {
  const [isOpen, setIsOpen] = createSignal(false);

  return (
    <ModusWcModal
      open={isOpen()} // ❌ This won't work as expected
      onClose={() => setIsOpen(false)}
    >
      <div slot="header">Modal Header</div>
      <div slot="body">Modal Body</div>
    </ModusWcModal>
  );
}

❌ Using createEffect to Control Modal State (Critical Anti-Pattern)

// ❌ WRONG: Using createEffect to control modal state
function ModusModal(props: { isOpen: boolean; onClose?: () => void }) {
  let modalRef: HTMLModusWcModalElement | undefined;

  // ❌ CRITICAL ANTI-PATTERN: Don't control modal state from SolidJS
  createEffect(() => {
    const modal = modalRef;
    if (modal) {
      if (props.isOpen) {
        const dialogElement = modal.querySelector("dialog");
        if (dialogElement) {
          dialogElement.showModal();
        }
      } else {
        const dialogElement = modal.querySelector("dialog");
        if (dialogElement) {
          dialogElement.close();
        }
      }
    }
  }); // ❌ This violates the official pattern

  return <ModusWcModal ref={(el) => (modalRef = el)} {...props} />;
}