[Menu] Add prop to disable auto focus (#11984)

* Added Menu prop to disable auto focus * Update prop name per request of oliviertassinari * ready to be merged
mui · Jun 26, 2018 · 09896d4 · 09896d4
1 parent 585b099
commit 09896d4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/packages/material-ui/src/Menu/Menu.d.ts b/packages/material-ui/src/Menu/Menu.d.ts
@@ -9,6 +9,7 @@ import { ClassNameMap } from '../styles/withStyles';
 export interface MenuProps
   extends StandardProps<PopoverProps & Partial<TransitionHandlerProps>, MenuClassKey> {
   anchorEl?: HTMLElement;
+  disableAutoFocusItem?: boolean;
   MenuListProps?: Partial<MenuListProps>;
   PaperProps?: Partial<PaperProps>;
   PopoverClasses?: Partial<ClassNameMap<PopoverClassKey>>;

diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js
@@ -33,7 +33,7 @@ class Menu extends React.Component {
   menuList = null;
 
   componentDidMount() {
-    if (this.props.open) {
+    if (this.props.open && this.props.disableAutoFocusItem !== true) {
       this.focus();
     }
   }
@@ -59,11 +59,13 @@ class Menu extends React.Component {
   };
 
   handleEnter = element => {
-    const { theme } = this.props;
+    const { disableAutoFocusItem, theme } = this.props;
     const menuList = ReactDOM.findDOMNode(this.menuList);
 
     // Focus so the scroll computation of the Popover works as expected.
-    this.focus();
+    if (disableAutoFocusItem !== true) {
+      this.focus();
+    }
 
     // Let's ignore that piece of logic if users are already overriding the width
     // of the menu.
@@ -92,6 +94,7 @@ class Menu extends React.Component {
     const {
       children,
       classes,
+      disableAutoFocusItem,
       MenuListProps,
       onEnter,
       PaperProps = {},
@@ -146,6 +149,10 @@ Menu.propTypes = {
    * See [CSS API](#css-api) below for more details.
    */
   classes: PropTypes.object.isRequired,
+  /**
+   * If `true`, the selected / first menu item will not be auto focused.
+   */
+  disableAutoFocusItem: PropTypes.bool,
   /**
    * Properties applied to the `MenuList` element.
    */
@@ -207,6 +214,7 @@ Menu.propTypes = {
 };
 
 Menu.defaultProps = {
+  disableAutoFocusItem: false,
   transitionDuration: 'auto',
 };
 

diff --git a/pages/api/menu.md b/pages/api/menu.md
@@ -18,6 +18,7 @@ title: Menu API
 | <span class="prop-name">anchorEl</span> | <span class="prop-type">object |   | The DOM element used to set the position of the menu. |
 | <span class="prop-name">children</span> | <span class="prop-type">node |   | Menu contents, normally `MenuItem`s. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">disableAutoFocusItem</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the selected / first menu item will not be auto focused. |
 | <span class="prop-name">MenuListProps</span> | <span class="prop-type">object |   | Properties applied to the `MenuList` element. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func |   | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | <span class="prop-name">onEnter</span> | <span class="prop-type">func |   | Callback fired before the Menu enters. |