Skip to content

Input composition is canceled with ESC, but modal closes unexpectedly during IME composition #1067

@thashimoto123

Description

@thashimoto123

Describe the bug

When using an inside a react-modal, pressing the Escape key during IME text composition (e.g., Japanese, Chinese) closes the modal.
The expected behavior is that the composition should be canceled, not that the modal itself closes.

To Reproduce

  1. Open a modal created with react-modal.
  2. Focus an element inside the modal.
  3. Start typing using an IME (e.g., Japanese).
  4. While still in composition mode, press the Escape key.
  5. The modal closes unexpectedly.

Expected behavior

  • Pressing Escape during IME composition should cancel the composition only.
  • The modal should remain open.
  • This matches typical browser behavior and common UX expectations.

Actual behavior

  • The modal interprets the Escape key as a request to close and dismisses the modal even though the input is in composition mode.

Demo

1. Actual behavior (react-modal)

The modal closes when pressing Escape during IME composition.

Image

2. Expected behavior (native <dialog>)

Image

Environment

  • react-modal version: 3.16.3
  • React version: 18.3.1
  • Browser: Chrome
  • OS: macOS

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions