Fix Issue #1039 : extending KeyboardShortcut to Support Special Keys

src/components/Modal.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {View, useWindowDimensions} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
@@ -8,6 +8,7 @@ import styles, {getSafeAreaPadding} from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import getModalStyles from '../styles/getModalStyles';
 import CONST from '../CONST';
+import KeyboardShortcut from '../libs/KeyboardShortcut';
 
 const propTypes = {
     // Callback method fired when the user requests to close the modal
@@ -39,6 +40,12 @@ const Modal = (props) => {
         needsSafeAreaPadding,
     } = getModalStyles(props.type, useWindowDimensions());
 
+    // Register escape key listener via effect
+    useEffect(() => {
+        KeyboardShortcut.subscribe('Escape', () => props.onClose(), 'special');
+        return () => KeyboardShortcut.unsubscribe('Escape');
+    }, [props]);
+
     return (
         <ReactNativeModal
             onBackdropPress={props.onClose}

src/libs/KeyboardShortcut/index.js

@@ -7,12 +7,12 @@ const events = {};
  * @param {Event} event
  */
 function bindHandlerToKeyupEvent(event) {
-    if (events[event.keyCode] === undefined) {
+    if (events[event.key] === undefined) {
         return;
     }
 
     // The active callback is the last element in the array
-    const eventCallbacks = events[event.keyCode];
+    const eventCallbacks = events[event.key];
     const callback = eventCallbacks[eventCallbacks.length - 1];
 
     const pressedModifiers = _.all(callback.modifiers, (modifier) => {
@@ -25,10 +25,7 @@ function bindHandlerToKeyupEvent(event) {
         if (modifier === 'alt' && !event.altKey) {
             return false;
         }
-        if (modifier === 'meta' && !event.metaKey) {
-            return false;
-        }
-        return true;
+        return !(modifier === 'meta' && !event.metaKey);
     });
 
     if (!pressedModifiers) {
@@ -74,19 +71,19 @@ const KeyboardShortcut = {
      * @param {Boolean} captureOnInputs Should we capture the event on inputs too?
      */
     subscribe(key, callback, modifiers = 'shift', captureOnInputs = false) {
-        const keyCode = key.charCodeAt(0);
-        if (events[keyCode] === undefined) {
-            events[keyCode] = [];
+        // Enable support for special keys like Escape
+        if (events[key] === undefined) {
+            events[key] = [];
         }
-        events[keyCode].push({callback, modifiers: _.isArray(modifiers) ? modifiers : [modifiers], captureOnInputs});
+        events[key].push({callback, modifiers: _.isArray(modifiers) ? modifiers : [modifiers], captureOnInputs});
     },
 
     /**
      * Unsubscribes to a keyboard event.
-     * @param {Number} keyCode The key code to stop watching
+     * @param {String} key The key to stop watching
      */
-    unsubscribe(keyCode) {
-        delete events[keyCode];
+    unsubscribe(key) {
+        delete events[key];
     },
 };