diff --git a/packages/mui-base/src/unstable_useModal/useModal.ts b/packages/mui-base/src/unstable_useModal/useModal.ts
index b947383ab62229..dc877903af81c7 100644
--- a/packages/mui-base/src/unstable_useModal/useModal.ts
+++ b/packages/mui-base/src/unstable_useModal/useModal.ts
@@ -135,7 +135,11 @@ export function useModal(parameters: UseModalParameters): UseModalReturnValue {
// clicking a checkbox to check it, hitting a button to submit a form,
// and hitting left arrow to move the cursor in a text input etc.
// Only special HTML elements have these default behaviors.
- if (event.key !== 'Escape' || !isTopModal()) {
+ if (
+ event.key !== 'Escape' ||
+ event.which === 229 || // Wait until IME is settled.
+ !isTopModal()
+ ) {
return;
}
diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
index 0280c5810a0e2a..1fbbb2bc524eb8 100644
--- a/packages/mui-material/src/Dialog/Dialog.test.js
+++ b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -107,6 +107,24 @@ describe('', () => {
expect(queryByRole('dialog')).to.equal(null);
});
+ it('should not close until the IME is cancelled', () => {
+ const onClose = spy();
+ const { getByRole } = render(
+ ,
+ );
+ const textbox = getByRole('textbox');
+
+ // Actual Behavior when "あ" (Japanese) is entered and press the Esc for IME cancellation.
+ fireEvent.change(textbox, { target: { value: 'あ' } });
+ fireEvent.keyDown(textbox, { key: 'Esc', keyCode: 229 });
+ expect(onClose.callCount).to.equal(0);
+
+ fireEvent.keyDown(textbox, { key: 'Esc' });
+ expect(onClose.callCount).to.equal(1);
+ });
+
it('can ignore backdrop click and Esc keydown', () => {
function DialogWithBackdropClickDisabled(props) {
const { onClose, ...other } = props;