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;