[material-ui][Dialog] Should not close until the IME is cancelled (#3…

…9713)
mui · Nov 6, 2023 · c3d6309 · c3d6309
1 parent b4af011
commit c3d6309
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git 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
@@ -107,6 +107,24 @@ describe('<Dialog />', () => {
     expect(queryByRole('dialog')).to.equal(null);
   });
 
+  it('should not close until the IME is cancelled', () => {
+    const onClose = spy();
+    const { getByRole } = render(
+      <Dialog open transitionDuration={0} onClose={onClose}>
+        <input type="text" autoFocus />
+      </Dialog>,
+    );
+    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;