modus-modal-implementation-react

ModusWcModal Implementation in React

🚨 CRITICAL: Modal Method Access Issue

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

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 React state management.

❌ Common Anti-Patterns

❌ Direct Method Access (Won't Work)

// ❌ WRONG: Direct method access on component
function ModalComponent() {
  const modalRef = useRef<ModusWcModal>(null);

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

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

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <ModusWcModal ref={modalRef}>
        <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 React

// ❌ WRONG: Trying to control modal state from React
function ModalComponent() {
  const [isOpen, setIsOpen] = useState(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 useEffect to Control Modal State (Critical Anti-Pattern)

// ❌ WRONG: Using useEffect to control modal state
function ModusModal({ isOpen, onClose, ...props }) {
  const modalRef = useRef<HTMLModusWcModalElement>(null);

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

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