diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index b1bb1ea..a19bb1e 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -22,6 +22,7 @@ export default () => { return ( +
Real Version: {version} diff --git a/src/useEscKeyDown.ts b/src/useEscKeyDown.ts index 0044231..90e31c6 100644 --- a/src/useEscKeyDown.ts +++ b/src/useEscKeyDown.ts @@ -9,7 +9,7 @@ export default function useEscKeyDown(open: boolean, onEsc?: EscCallback) { const id = useId(); const handleEscKeyDown = useEvent((event: KeyboardEvent) => { - if (event.key === 'Escape') { + if (event.key === 'Escape' && !event.isComposing) { const top = stack[stack.length - 1] === id; onEsc?.({ top, event }); } diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 40b5eba..f95eeba 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -357,6 +357,19 @@ describe('Portal', () => { expect(onEscB).not.toHaveBeenCalled(); }); + it('should not trigger onEsc when IME composing', () => { + const onEsc = jest.fn(); + + render( + + + , + ); + + fireEvent.keyDown(window, { key: 'Escape', isComposing: true }); + expect(onEsc).not.toHaveBeenCalled(); + }); + it('should clear stack when unmount', () => { const { unmount } = render(