diff --git a/.size-limit.js b/.size-limit.js index 2bb652af3e085e..16d63b7b2b7444 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -27,7 +27,7 @@ module.exports = [ name: 'The size of all the modules of material-ui.', webpack: true, path: 'packages/material-ui/build/index.js', - limit: '94.7 KB', + limit: '94.8 KB', }, { name: 'The main bundle of the docs', diff --git a/packages/material-ui/src/Menu/Menu.d.ts b/packages/material-ui/src/Menu/Menu.d.ts index b7e470f45d765d..493fa207127317 100644 --- 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, MenuClassKey> { anchorEl?: HTMLElement; + disableAutoFocusItem?: boolean; MenuListProps?: Partial; PaperProps?: Partial; PopoverClasses?: Partial>; diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index 7342cc9ab71a68..629c584e2288fc 100644 --- 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 index 271263d5ea86e9..dfb55b5228bcb3 100644 --- a/pages/api/menu.md +++ b/pages/api/menu.md @@ -18,6 +18,7 @@ title: Menu API | anchorEl | object |   | The DOM element used to set the position of the menu. | | children | node |   | Menu contents, normally `MenuItem`s. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| disableAutoFocusItem | bool | false | If `true`, the selected / first menu item will not be auto focused. | | MenuListProps | object |   | Properties applied to the `MenuList` element. | | onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | | onEnter | func |   | Callback fired before the Menu enters. |