fix: support KeyboardEvent.code (#76)

Author: kyletsang

src/Modal.tsx

@@ -24,6 +24,7 @@ import useWaitForDOMRef, { DOMContainer } from './useWaitForDOMRef';
 import { TransitionCallbacks } from './types';
 import useWindow from './useWindow';
 import { renderTransition, TransitionHandler } from './ImperativeTransition';
+import { isEscKey } from './utils';
 
 let manager: ModalManager;
 
@@ -391,7 +392,7 @@ const Modal: React.ForwardRefExoticComponent<
     });
 
     const handleDocumentKeyDown = useEventCallback((e: KeyboardEvent) => {
-      if (keyboard && e.keyCode === 27 && modal.isTopModal()) {
+      if (keyboard && isEscKey(e) && modal.isTopModal()) {
         onEscapeKeyDown?.(e);
 
         if (!e.defaultPrevented) {

src/useRootClose.ts

@@ -7,8 +7,8 @@ import useClickOutside, {
   ClickOutsideOptions,
   getRefTarget,
 } from './useClickOutside';
+import { isEscKey } from './utils';
 
-const escapeKeyCode = 27;
 const noop = () => {};
 
 export interface RootCloseOptions extends ClickOutsideOptions {
@@ -37,7 +37,7 @@ function useRootClose(
   useClickOutside(ref, onClose, { disabled, clickTrigger });
 
   const handleKeyUp = useEventCallback((e: KeyboardEvent) => {
-    if (e.keyCode === escapeKeyCode) {
+    if (isEscKey(e)) {
       onClose(e);
     }
   });

src/utils.ts

@@ -0,0 +1,4 @@
+/* eslint-disable import/prefer-default-export */
+export function isEscKey(e: KeyboardEvent) {
+  return e.code === 'Escape' || e.keyCode === 27;
+}

test/ModalSpec.js

@@ -158,7 +158,7 @@ describe('<Modal>', () => {
 
     let { backdrop } = ref.current;
 
-    simulant.fire(backdrop, 'keydown', { keyCode: 27 });
+    simulant.fire(backdrop, 'keydown', { code: 'Escape', keyCode: 27 });
   });
 
   it('should not trigger onHide if e.preventDefault() called', () => {
@@ -176,7 +176,7 @@ describe('<Modal>', () => {
 
     let { backdrop } = ref.current;
 
-    simulant.fire(backdrop, 'keydown', { keyCode: 27 });
+    simulant.fire(backdrop, 'keydown', { code: 'Escape', keyCode: 27 });
     expect(onHideSpy).to.not.have.been.called;
   });
 
@@ -306,7 +306,10 @@ describe('<Modal>', () => {
     wrapper.setProps({ show: true });
 
     act(() => {
-      simulant.fire(ref.current.backdrop, 'keydown', { keyCode: 27 });
+      simulant.fire(ref.current.backdrop, 'keydown', {
+        code: 'Escape',
+        keyCode: 27,
+      });
     });
 
     expect(onEscapeSpy).to.have.been.calledOnce;

test/useRootCloseSpec.js

@@ -158,11 +158,15 @@ describe('useRootClose', () => {
 
       expect(spy).to.not.have.been.called;
 
-      simulant.fire(document.body, 'keyup', { keyCode: escapeKeyCode });
+      simulant.fire(document.body, 'keyup', {
+        code: 'Escape',
+        keyCode: escapeKeyCode,
+      });
 
       expect(spy).to.have.been.calledOnce;
 
       expect(spy.getCall(0).args.length).to.be.equal(1);
+      expect(spy.getCall(0).args[0].code).to.be.equal('Escape');
       expect(spy.getCall(0).args[0].keyCode).to.be.equal(escapeKeyCode);
       expect(spy.getCall(0).args[0].type).to.be.equal('keyup');
     });
@@ -182,13 +186,17 @@ describe('useRootClose', () => {
         </Wrapper>,
       );
 
-      simulant.fire(document.body, 'keyup', { keyCode: escapeKeyCode });
+      simulant.fire(document.body, 'keyup', {
+        code: 'Escape',
+        keyCode: escapeKeyCode,
+      });
 
       // TODO: Update to match expectations.
       // expect(outerSpy).to.have.not.been.called;
       expect(innerSpy).to.have.been.calledOnce;
 
       expect(innerSpy.getCall(0).args.length).to.be.equal(1);
+      expect(innerSpy.getCall(0).args[0].code).to.be.equal('Escape');
       expect(innerSpy.getCall(0).args[0].keyCode).to.be.equal(escapeKeyCode);
       expect(innerSpy.getCall(0).args[0].type).to.be.equal('keyup');
     });