RC-Dialog

Common errors

• Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.

  cause Often occurs when the `visible` prop is controlled by a state variable, and the `onClose` handler directly sets the state without a conditional check, leading to an infinite re-render loop if not managed carefully.
  fix Ensure that `onClose` or any visibility toggling function correctly updates the state to `false` (or the desired hidden state) and that there are no unintended side effects causing the dialog to immediately reopen. Example: `const onClose = useCallback(() => setVisible(false), []);`

• TypeError: Cannot read properties of undefined (reading 'focus') / Element not focusable

  cause The dialog or its internal elements are attempting to set focus on an element that is not yet rendered, has been unmounted, or is not capable of being focused (e.g., a hidden element). This is common with `destroyOnClose` or asynchronous rendering.
  fix Verify that elements are present in the DOM before attempting to focus them. If using `destroyOnClose`, consider alternative strategies for preserving focus, or explicitly set focus to the trigger element in the `afterClose` callback. For custom focus handling, use `getContainer` to control where the dialog mounts, ensuring it's part of the accessible DOM tree.

• Module not found: Can't resolve 'rc-dialog'

  cause The `rc-dialog` package is not correctly installed or the import path is incorrect. This can also happen in environments with strict module resolution if a CommonJS `require` is used where an ESM `import` is expected, or vice-versa.
  fix First, ensure the package is installed: `npm install rc-dialog` or `yarn add rc-dialog`. Double-check the import statement `import Dialog from 'rc-dialog';`. If using a bundler like Webpack, ensure its module resolution configuration (e.g., `resolve.extensions`) is set up to handle `.js`, `.jsx`, `.ts`, `.tsx` files correctly.

Warnings

• breaking The `rc-dialog` package itself has not had a significant release or update since version 10.0.0, published over a year ago. Active development, bug fixes, and new features (like improved focus management and semantic close) are now occurring in the `@rc-component/dialog` package. Migrating from `rc-dialog` to `@rc-component/dialog` is strongly recommended for new projects or to receive ongoing support and features.
  Fix: Consider migrating to `@rc-component/dialog`. Review its documentation for potential API differences. For example, imports will change from `import Dialog from 'rc-dialog'` to `import Dialog from '@rc-component/dialog'`. Ensure you update styling references accordingly if any internal class names have changed.
• gotcha Focus management within modals, especially when dealing with nested dialogs or components that create their own focus traps (e.g., date pickers, select dropdowns), can lead to unexpected behavior where focus is incorrectly trapped or lost. This is a common issue for accessibility in UI libraries.
  Fix: Carefully test focus flow for all interactive elements within and outside the dialog. Ensure `keyboard` prop is used for Esc key closing. For complex scenarios, you might need to manually manage focus using `ref`s and the DOM API, or explore `focusTrap` options if available in newer versions of `@rc-component/dialog`.
• gotcha The default styles for `rc-dialog` are provided via a separate CSS file (`rc-dialog/assets/index.css`). Failing to import this CSS will result in an unstyled, potentially unusable dialog, as the component itself only provides the DOM structure and logic.
  Fix: Always include `import 'rc-dialog/assets/index.css';` in your entry file or a relevant component file. For custom styling, override these defaults using the `prefixCls`, `className`, `classNames`, or `style`/`styles` props.
• gotcha Using `require('rc-dialog')` (CommonJS) alongside `import ... from 'rc-dialog'` (ESM) in a mixed environment can lead to build tool issues or unexpected import resolutions, especially in modern React applications predominantly using ESM.
  Fix: For new projects or modern bundlers, prefer ESM imports: `import Dialog from 'rc-dialog';`. If you must use CommonJS, stick to `const Dialog = require('rc-dialog');` consistently. Ensure your build configuration correctly handles module resolution.

Install

• npm install rc-dialog npm
• yarn add rc-dialog yarn
• pnpm add rc-dialog pnpm

Imports

• Dialog
  wrong:

  import { Dialog } from 'rc-dialog';

  correct:

  import Dialog from 'rc-dialog';

  The primary Dialog component is a default export in modern ESM environments, though the README shows CommonJS `require`.
• IDialogPropTypes

  import type { IDialogPropTypes } from 'rc-dialog';

  Import for TypeScript type definitions for Dialog component props. The type definition files are available under `lib/IDialogPropTypes.d.ts`.
• DialogWrap

  import type { DialogWrap } from 'rc-dialog';

  Type import for the internal DialogWrap component, which might be useful for advanced customization or type extension. Available under `lib/DialogWrap.d.ts`.

Quickstart

This quickstart demonstrates a basic functional React component using `rc-dialog`, including state management for visibility, custom title, and event handling for closing. It highlights essential props like `visible`, `onClose`, `maskClosable`, `keyboard`, and `destroyOnClose`, and includes the necessary CSS import.

import React, { useState, useCallback } from 'react';
import ReactDOM from 'react-dom/client';
import Dialog from 'rc-dialog';
import 'rc-dialog/assets/index.css'; // Don't forget to import the default styles

const App = () => {
  const [visible, setVisible] = useState(false);
  const [title, setTitle] = useState('Basic Dialog');

  const showDialog = useCallback(() => {
    setVisible(true);
  }, []);

  const onClose = useCallback(() => {
    console.log('Dialog closed!');
    setVisible(false);
  }, []);

  return (
    <div>
      <button onClick={showDialog}>Open Dialog</button>
      <Dialog
        title={title}
        visible={visible}
        onClose={onClose}
        maskClosable={true} // Allow closing by clicking the mask
        keyboard={true}    // Allow closing by pressing Esc key
        destroyOnClose={true} // Unmount children when dialog closes
        className="my-custom-dialog"
        style={{ width: 500 }}
      >
        <p>This is the content of the dialog.</p>
        <p>You can put any React elements here.</p>
        <p>Current version: 10.0.0</p>
        <button onClick={() => alert('Button inside dialog clicked!')}>Click Me</button>
      </Dialog>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<App />);