Update: Make focusing the grid optional via autoFocus prop (#12)

* Update: Make focusing the grid optional via autoFocus prop
* Fix: Readme urls

Author: priyajeet

README.md

@@ -71,6 +71,7 @@ render(
 | onUpload | function(Array<[File](https://developer.box.com/reference#file-object)>) |  | Callback function for when item(s) are uploaded. |
 | onNavigate | function([File](https://developer.box.com/reference#file-object)) |  | Callback function for when navigating into a folder. |
 | isTouch | boolean |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
+| autoFocus | boolean |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | logoUrl | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | sharedLink | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | sharedLinkPassword | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
@@ -116,6 +117,7 @@ render(
 | onCancel | function |  | Callback function for when the cancel button is pressed. |
 | onChoose | function |  | Callback function for when the choose button is pressed. |
 | isTouch | boolean |  | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
+| autoFocus | boolean |  | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
 | logoUrl | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
 | sharedLink | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
 | sharedLinkPassword | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
@@ -190,6 +192,7 @@ render(
 | type | string | `file, web_link, folder` | Indicates which type of items show up in the tree. Should be a comma seperated combination of `file`, `folder` or `web_link`. |
 | onClick | function([Folder](https://developer.box.com/reference#folder-object)|[File](https://developer.box.com/reference#file-object)|[Web Link](https://developer.box.com/reference#web-link-object)) |  | Callback function for when an item is clicked. |
 | isTouch | boolean |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
+| autoFocus | boolean |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
 | logoUrl | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
 | sharedLink | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
 | sharedLinkPassword | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |

src/components/ContentExplorer/ContentExplorer.js

@@ -71,6 +71,7 @@ type Props = {
     isSmall: boolean,
     isLarge: boolean,
     isTouch: boolean,
+    autoFocus: boolean,
     className: string,
     measureRef: Function,
     onDelete: Function,
@@ -113,6 +114,7 @@ type DefaultProps = {|
     canPreview: boolean,
     canShare: boolean,
     canSetShareAccess: boolean,
+    autoFocus: boolean,
     apiHost: string,
     uploadHost: string,
     className: string,
@@ -145,6 +147,7 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
         canShare: true,
         canPreview: true,
         canSetShareAccess: true,
+        autoFocus: false,
         apiHost: DEFAULT_HOSTNAME_API,
         uploadHost: DEFAULT_HOSTNAME_UPLOAD,
         className: '',
@@ -310,12 +313,18 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
      * @return {void}
      */
     finishNavigation() {
-        const { onNavigate }: Props = this.props;
+        const { onNavigate, autoFocus }: Props = this.props;
         const { currentCollection: { percentLoaded, boxItem } }: State = this.state;
         onNavigate(cloneDeep(boxItem));
 
         // Don't focus the grid until its loaded and user is not already on an interactable element
-        if (percentLoaded !== 100 || !this.table || !this.table.Grid || isActionableElement(document.activeElement)) {
+        if (
+            !autoFocus ||
+            percentLoaded !== 100 ||
+            !this.table ||
+            !this.table.Grid ||
+            isActionableElement(document.activeElement)
+        ) {
             return;
         }
         const grid: any = findDOMNode(this.table.Grid);

src/components/ContentPicker/ContentPicker.js

@@ -61,6 +61,7 @@ type Props = {
     maxSelectable: number,
     canUpload: boolean,
     canSetShareAccess: boolean,
+    autoFocus: boolean,
     apiHost: string,
     uploadHost: string,
     getLocalizedMessage: Function,
@@ -98,6 +99,7 @@ type DefaultProps = {|
     maxSelectable: number,
     canUpload: boolean,
     canSetShareAccess: boolean,
+    autoFocus: boolean,
     apiHost: string,
     uploadHost: string,
     clientName: string,
@@ -124,6 +126,7 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
         maxSelectable: Infinity,
         canUpload: true,
         canSetShareAccess: true,
+        autoFocus: false,
         className: '',
         apiHost: DEFAULT_HOSTNAME_API,
         uploadHost: DEFAULT_HOSTNAME_UPLOAD,
@@ -316,6 +319,30 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
         }
     };
 
+    /**
+     * Focuses the grid
+     *
+     * @private
+     * @return {void}
+     */
+    finishNavigation() {
+        const { autoFocus }: Props = this.props;
+        const { currentCollection: { percentLoaded } }: State = this.state;
+
+        // Don't focus the grid until its loaded and user is not already on an interactable element
+        if (
+            !autoFocus ||
+            percentLoaded !== 100 ||
+            !this.table ||
+            !this.table.Grid ||
+            isActionableElement(document.activeElement)
+        ) {
+            return;
+        }
+        const grid: any = findDOMNode(this.table.Grid);
+        grid.focus();
+    }
+
     /**
      * Folder fetch success callback
      *
@@ -335,13 +362,7 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
         };
 
         // Set the new state and focus the grid for tabbing
-        this.setState(newState, () => {
-            if (!this.table || !this.table.Grid || isActionableElement(document.activeElement)) {
-                return;
-            }
-            const grid: any = findDOMNode(this.table.Grid);
-            grid.focus();
-        });
+        this.setState(newState, this.finishNavigation);
     };
 
     /**

src/components/ContentTree/ContentTree.js

@@ -12,6 +12,7 @@ import noop from 'lodash.noop';
 import Content from './Content';
 import API from '../../api';
 import makeResponsive from '../makeResponsive';
+import isActionableElement from '../../util/dom';
 import {
     DEFAULT_HOSTNAME_API,
     DEFAULT_ROOT,
@@ -39,6 +40,7 @@ type Props = {
     isSmall: boolean,
     isLarge: boolean,
     isTouch: boolean,
+    autoFocus: boolean,
     className: string,
     measureRef: Function,
     sharedLink?: string,
@@ -56,6 +58,7 @@ type DefaultProps = {|
     onClick: Function,
     apiHost: string,
     clientName: string,
+    autoFocus: boolean,
     className: string
 |};
 
@@ -71,6 +74,7 @@ class ContentTree extends Component<DefaultProps, Props, State> {
         rootFolderId: DEFAULT_ROOT,
         onClick: noop,
         className: '',
+        autoFocus: false,
         apiHost: DEFAULT_HOSTNAME_API,
         clientName: CLIENT_NAME_CONTENT_TREE
     };
@@ -199,6 +203,30 @@ class ContentTree extends Component<DefaultProps, Props, State> {
         }
     };
 
+    /**
+     * Focuses the grid
+     *
+     * @private
+     * @return {void}
+     */
+    finishNavigation() {
+        const { autoFocus }: Props = this.props;
+        const { currentCollection: { percentLoaded } }: State = this.state;
+
+        // Don't focus the grid until its loaded and user is not already on an interactable element
+        if (
+            !autoFocus ||
+            percentLoaded !== 100 ||
+            !this.table ||
+            !this.table.Grid ||
+            isActionableElement(document.activeElement)
+        ) {
+            return;
+        }
+        const grid: any = findDOMNode(this.table.Grid);
+        grid.focus();
+    }
+
     /**
      * Folder fetch success callback
      *
@@ -230,13 +258,7 @@ class ContentTree extends Component<DefaultProps, Props, State> {
         }
 
         // Set the new state and focus the grid for tabbing
-        this.setState({ currentCollection }, () => {
-            if (!this.table || !this.table.Grid) {
-                return;
-            }
-            const grid: any = findDOMNode(this.table.Grid);
-            grid.focus();
-        });
+        this.setState({ currentCollection }, this.finishNavigation);
     };
 
     /**

test/explorer.html

@@ -128,7 +128,8 @@ <h1>Content Explorer</h1>
                 document.querySelector('.explorer2').innerHTML = '';
                 explorer2.show(folderId, token, {
                     container: '.explorer2',
-                    logoUrl: 'https://d30y9cdsu7xlg0.cloudfront.net/png/12458-200.png'
+                    logoUrl: 'https://d30y9cdsu7xlg0.cloudfront.net/png/12458-200.png',
+                    autoFocus: true
                 });
             }
             load();

test/pickers.html

@@ -116,6 +116,7 @@ <h1>Folder Picker (max 3 items / token generator / no upload)</h1>
                 });
                 filePicker1.show(folderId, token, {
                     container: '.filePicker1',
+                    autoFocus: true,
                     logoUrl: 'https://d30y9cdsu7xlg0.cloudfront.net/png/12458-200.png'
                 });
 

test/tree.html

@@ -85,7 +85,8 @@ <h1>Content Tree</h1>
                 document.querySelector('.tree2').innerHTML = '';
                 tree2.show(folderId, token, {
                     container: '.tree2',
-                    type: 'folder,file,web_link'
+                    type: 'folder,file,web_link',
+                    autoFocus: true
                 });
             }
             load();