Fix: Only focus preview when auto focus is allowed

src/components/ContentExplorer/PreviewDialog.js

@@ -89,6 +89,7 @@ const PreviewDialog = ({
                 cache={cache}
                 token={token}
                 hasHeader
+                autoFocus
                 collection={files}
                 onLoad={onLoad}
                 onClose={onCancel}

src/components/ContentPreview/ContentPreview.js

@@ -42,6 +42,7 @@ type Props = {
     fileId: string,
     version: string,
     isSmall: boolean,
+    autoFocus: boolean,
     showSidebar?: boolean,
     hasSidebar: boolean,
     canDownload?: boolean,
@@ -98,6 +99,7 @@ class ContentPreview extends PureComponent<Props, State> {
         canDownload: true,
         showDownload: true,
         hasHeader: false,
+        autoFocus: false,
         onLoad: noop,
         onNavigate: noop,
         onInteraction: noop,
@@ -189,7 +191,7 @@ class ContentPreview extends PureComponent<Props, State> {
         this.loadScript();
         this.fetchFile(fileId);
         this.rootElement = ((document.getElementById(this.id): any): HTMLElement);
-        focus(this.rootElement);
+        this.focusPreview();
     }
 
     /**
@@ -270,6 +272,21 @@ class ContentPreview extends PureComponent<Props, State> {
         head.appendChild(script);
     }
 
+    /**
+     * Focuses the preview on load.
+     * We should respect auto focus when component 1st mounts.
+     *
+     * @param {boolean} ignoreAutoFocus - ignores auto focus prop
+     * @return {void}
+     */
+    focusPreview(ignoreAutoFocus = false) {
+        const { autoFocus }: Props = this.props;
+        const shouldAutoFocus = ignoreAutoFocus ? true : autoFocus;
+        if (shouldAutoFocus && !isInputElement(document.activeElement)) {
+            focus(this.rootElement);
+        }
+    }
+
     /**
      * Calls destroy of preview
      *
@@ -339,6 +356,7 @@ class ContentPreview extends PureComponent<Props, State> {
         const currentIndex = this.getFileIndex();
         const filesToPrefetch = collection.slice(currentIndex + 1, currentIndex + 5);
         onLoad(data);
+        this.focusPreview(true);
         if (this.preview && filesToPrefetch.length > 1) {
             this.prefetch(filesToPrefetch);
         }
@@ -373,7 +391,7 @@ class ContentPreview extends PureComponent<Props, State> {
             skipServerUpdate: true,
             header: 'none',
             container: `#${this.id} .bcpr-content`,
-            useHotKeys: false
+            useHotkeys: false
         };
 
         this.preview = new Preview();
@@ -629,7 +647,7 @@ class ContentPreview extends PureComponent<Props, State> {
         }
 
         if (typeof viewer.onKeydown === 'function') {
-            consumed = !!viewer.onKeydown(key);
+            consumed = !!viewer.onKeydown(key, event.nativeEvent);
         }
 
         if (!consumed) {

test/explorer-no-react.html

@@ -58,8 +58,8 @@ <h1>Content Explorer With request and response intercepting.
                 Only showing PNG files and navigating to another folder on load and token generator</h1>
             <div class="explorer1"></div>
         </div>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
         <script src="../dev/en-US/explorer.no.react.js"></script>
         <script>
             function load() {

test/pickers-no-react.html

@@ -73,8 +73,8 @@ <h1>File Picker (max 3 items / token generator / only 'pdf', 'doc', 'docx', 'ppt
             <h1>Folder Picker (max 3 items / token generator / cannot upload)</h1>
             <div class="folderPicker2"></div>
         </div>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
         <script src="../dev/en-US/picker.no.react.js"></script>
         <script>
             function load() {

test/preview.html

@@ -51,7 +51,7 @@
                             break;
                     }
                 });
-                explorer.show('0', '9upIfU2zEFyB1Yzhgy1AN9COgNzURifL', {
+                explorer.show('0', 'VsnpLLwKW1DWPQHAeLSvawNHrLXzmMKQ', {
                     currentFolderId: '39695871110',
                     hasPreviewSidebar: true,
                     sharedLink: 'https://app.box.com/s/sdfsdf'

test/uploader-no-react.html

@@ -54,8 +54,8 @@
             <h1>Content Uploader</h1>
             <div class="uploader1"></div>
         </div>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
         <script src="../dev/en-US/uploader.no.react.js"></script>
         <script>
             // Set token and folder ID to locally stored values if available