[modal] Escape shouldn't trigger until IME is settled

[oliviertassinari]

Steps to reproduce

Steps:

1. Open https://master--base-ui.netlify.app/components/react-dialog/
2. Start typing into the input. Start a composite word. Press Escape to cancel it.

Current behavior

It closes the modal

Japanese:

https://github.com/user-attachments/assets/3644d62a-63af-435a-b718-a99824343dd9

French:

https://github.com/user-attachments/assets/015e1bce-78db-4b36-8062-7cd73095c072

Expected behavior

It only closes the composite selector. https://mui.com/base-ui/react-modal/#component

https://github.com/user-attachments/assets/c2cb7ff1-2ae8-4b90-a66b-1624ac0dce2b

Context

• It's easy to fix. See how it was fixed in the PR linked below.
• It's a regression from @mui/base. It works correctly there since this change was made: https://github.com/mui/material-ui/pull/39713.
• As for where this is broken, it seems to be from https://github.com/floating-ui/floating-ui/blob/ecd627e4676a50643edcdf8915a6acefa50ee3d8/packages/react/src/hooks/useDismiss.ts#L159.
• It's a low priority, we lived with this bug for a very long time in Material UI, so to fix, but for later.

[naaa760]

Hello @oliviertassinari :)

I think to fix the issue, change the key handler of the modal to use event.isComposing to determine whether the IME composition is active. If so, don't press the "Escape" key to stop the modal from closing. As a result, "Escape" will only cancel the IME input and won't shut the modal until the composition is finalized.

[naaa760]

Please assign me this issue!

[oliviertassinari]

@naaa760 This is low priority, we have no plan to fix it in the short term.

[atomiks]

If event.isComposing is unreliable in Safari then Number Field also needs to change to the event.which technique.

https://github.com/mui/base-ui/blob/cab77be3ad7e4c4f7a23b624146404b0ccb1c6a2/packages/mui-base/src/NumberField/Root/useNumberFieldRoot.ts#L665

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[oliviertassinari]

Reopening, #803 fixes a different component. Dialog Material UI -> Base UI regression is still present.

[atomiks]

It's fixed but in an upstream dependency

The issue for popups was fixed in Floating UI already

[oliviertassinari]

Ah, so https://github.com/floating-ui/floating-ui/pull/3075.

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.