JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>

TypeScript

import { Dialog } from '@headlessui/react';
import React, { useRef } from 'react';

interface MyDialogProps {
  isOpen: boolean;
  onClose: () => void;
  completeButtonRef?: React.RefObject<HTMLButtonElement>;
}

const MyDialog: React.FC<MyDialogProps> = ({ isOpen, onClose, completeButtonRef }) => {
  return (
    <Dialog open={isOpen} onClose={onClose} initialFocus={completeButtonRef}>
      <Dialog.Title>Dialog Title</Dialog.Title>
      <Dialog.Content>
        {/* Your dialog content */}
        <p>Dialog Content</p>
        {/* Nested Dialog (Child Modal) */}
        <ChildDialog isOpen={/* Set condition for child modal */} onClose={onClose} />
      </Dialog.Content>
      <Dialog.Actions>
        {/* Your actions, including the button with the ref */}
        <button ref={completeButtonRef}>Complete</button>
        <button onClick={onClose}>Cancel</button>
      </Dialog.Actions>
    </Dialog>
  );
};

interface ChildDialogProps {
  isOpen: boolean;
  onClose: () => void;
}

const ChildDialog: React.FC<ChildDialogProps> = ({ isOpen, onClose }) => {
  return (
    <Dialog open={isOpen} onClose={onClose}>
      <Dialog.Title>Child Dialog Title</Dialog.Title>
      <Dialog.Content>
        {/* Child dialog content */}
        <p>Child Dialog Content</p>
      </Dialog.Content>
      <Dialog.Actions>
        {/* Child dialog actions */}
        <button onClick={onClose}>Close Child Dialog</button>
      </Dialog.Actions>
    </Dialog>
  );
};

const App: React.FC = () => {
  const completeButtonRef = useRef<HTMLButtonElement>(null);

  return (
    <div>
      {/* Your main dialog component */}
      <MyDialog isOpen={/* Set condition for main dialog */} onClose={() => console.log('Close')} completeButtonRef={completeButtonRef} />
    </div>
  );
};

export default App;