Fix: Do not lower case event.key (#239)

Also fixes render method for sidebar Updates box-react-ui
box · Mar 28, 2018 · b182ba1 · b182ba1
1 parent c10262a
commit b182ba1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 155 deletions.
diff --git a/package.json b/package.json
@@ -123,7 +123,7 @@
     "babel-template": "^6.25.0",
     "babel-types": "^6.25.0",
     "box-locales": "^0.0.1",
-    "box-react-ui": "^22.6.0",
+    "box-react-ui": "^22.7.0",
     "circular-dependency-plugin": "^4.4.0",
     "classnames": "^2.2.5",
     "color": "^3.0.0",
@@ -192,7 +192,7 @@
   },
   "peerDependencies": {
     "axios": "^0.18.0",
-    "box-react-ui": "^22.6.0",
+    "box-react-ui": "^22.7.0",
     "classnames": "^2.2.5",
     "filesize": "^3.6.0",
     "jsuri": "^1.3.1",

diff --git a/src/components/ContentPreview/ContentPreview.js b/src/components/ContentPreview/ContentPreview.js
@@ -12,6 +12,7 @@ import omit from 'lodash/omit';
 import getProp from 'lodash/get';
 import noop from 'lodash/noop';
 import Measure from 'react-measure';
+import { decode } from 'box-react-ui/lib/utils/keys';
 import PlainButton from 'box-react-ui/lib/components/plain-button/PlainButton';
 import IconNavigateLeft from 'box-react-ui/lib/icons/general/IconNavigateLeft';
 import IconNavigateRight from 'box-react-ui/lib/icons/general/IconNavigateRight';
@@ -617,15 +618,13 @@ class ContentPreview extends PureComponent<Props, State> {
      * @return {void}
      */
     onKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
-        if (isInputElement(event.target)) {
-            return;
-        }
-
         let consumed = false;
-        const key = event.key.toLowerCase();
+        const key = decode(event);
         const viewer = this.getPreviewer();
 
-        if (!key || !viewer) {
+        // If focus was on an input or if the viewer doesn't exist
+        // then don't bother doing anything further
+        if (!key || !viewer || isInputElement(event.target)) {
             return;
         }
 
@@ -635,11 +634,11 @@ class ContentPreview extends PureComponent<Props, State> {
 
         if (!consumed) {
             switch (key) {
-                case 'arrowleft':
+                case 'ArrowLeft':
                     this.navigateLeft();
                     consumed = true;
                     break;
-                case 'arrowright':
+                case 'ArrowRight':
                     this.navigateRight();
                     consumed = true;
                     break;

diff --git a/src/components/ContentSidebar/ContentSidebar.js b/src/components/ContentSidebar/ContentSidebar.js
@@ -200,12 +200,12 @@ class ContentSidebar extends PureComponent<Props, State> {
 
         return (
             hasSkills ||
-                hasProperties ||
-                hasMetadata ||
-                hasAccessStats ||
-                hasClassification ||
-                hasActivityFeed ||
-                hasVersions,
+            hasProperties ||
+            hasMetadata ||
+            hasAccessStats ||
+            hasClassification ||
+            hasActivityFeed ||
+            hasVersions ||
             hasNotices
         );
     }
@@ -365,16 +365,13 @@ class ContentSidebar extends PureComponent<Props, State> {
             onAccessStatsClick
         }: Props = this.props;
         const { file, accessStats, versions }: State = this.state;
-
-        if (!this.shouldFetchOrRender()) {
-            return null;
-        }
+        const shouldRender = this.shouldFetchOrRender() && !!file;
 
         return (
             <Internationalize language={language} messages={messages}>
                 <div id={this.id} className={`be bcs ${className}`}>
                     <div className='be-app-element'>
-                        {file ? (
+                        {shouldRender ? (
                             <Sidebar
                                 file={file}
                                 versions={versions}