Disable auto-focus on the WindowTopMenu and handle our focus ourselves in the...

Disable auto-focus on the WindowTopMenu and handle our focus ourselves in the WindowViewSettings component.

__tests__/src/components/WindowViewSettings.test.js

 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -45,4 +45,31 @@ describe('WindowViewSettings', () => {
     wrapper.find(MenuItem).at(1).simulate('click');
     expect(setWindowViewType).toHaveBeenCalledWith('xyz', 'book');
   });
+
+  it('sets the selected ref to a MenuItem in the component (when mounting)', () => {
+    const wrapper = mount(
+      <WindowViewSettings
+        classes={{}}
+        windowId="xyz"
+        setWindowViewType={() => {}}
+        windowViewType="single"
+      />,
+    );
+
+    expect(
+      wrapper // eslint-disable-line no-underscore-dangle
+        .instance()
+        .selectedRef
+        ._reactInternalFiber
+        .type
+        .displayName,
+    ).toEqual('WithStyles(MenuItem)');
+
+    // The document's ActiveElement is an li
+    expect(
+      document
+        .activeElement[Object.keys(document.activeElement)[0]]
+        .elementType,
+    ).toEqual('li');
+  });
 });

src/components/WindowTopMenu.js

@@ -35,6 +35,7 @@ export class WindowTopMenu extends Component {
           getContentAnchorEl={null}
           open={Boolean(anchorEl)}
           onClose={handleClose}
+          disableAutoFocusItem
         >
           <WindowViewSettings windowId={windowId} handleClose={handleClose} />
           <WindowThumbnailSettings windowId={windowId} handleClose={handleClose} />

src/components/WindowViewSettings.js

 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import ListSubheader from '@material-ui/core/ListSubheader';
@@ -18,6 +19,25 @@ export class WindowViewSettings extends Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
+  /**
+   * Take action when the component mounts for the first time
+   */
+  componentDidMount() {
+    if (this.selectedRef) {
+      // MUI uses ReactDOM.findDOMNode and refs for handling focus
+      ReactDOM.findDOMNode(this.selectedRef).focus(); // eslint-disable-line react/no-find-dom-node
+    }
+  }
+
+  /**
+   * @private
+   */
+  handleSelectedRef(ref) {
+    if (this.selectedRef) return;
+
+    this.selectedRef = ref;
+  }
+
   /**
    * @private
    */
@@ -41,7 +61,11 @@ export class WindowViewSettings extends Component {
       <>
         <ListSubheader role="presentation" tabIndex="-1">{t('view')}</ListSubheader>
 
-        <MenuItem className={classes.MenuItem} onClick={() => { this.handleChange('single'); handleClose(); }}>
+        <MenuItem
+          className={classes.MenuItem}
+          ref={ref => this.handleSelectedRef(ref)}
+          onClick={() => { this.handleChange('single'); handleClose(); }}
+        >
           <FormControlLabel
             value="single"
             classes={{ label: windowViewType === 'single' ? classes.selectedLabel : undefined }}