From c23807742caffb4a3693adc96db1ec3af79aa6cf Mon Sep 17 00:00:00 2001 From: Wyatt Greenway Date: Mon, 18 Jun 2018 16:55:48 -0700 Subject: [PATCH 1/3] Added Menu prop to disable auto focus --- packages/material-ui/src/Menu/Menu.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index 7342cc9ab71a68..929e4c0d1dae44 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.disableAutoFocus !== true) { this.focus(); } } @@ -63,7 +63,9 @@ class Menu extends React.Component { const menuList = ReactDOM.findDOMNode(this.menuList); // Focus so the scroll computation of the Popover works as expected. - this.focus(); + if (this.props.disableAutoFocus !== true) { + this.focus(); + } // Let's ignore that piece of logic if users are already overriding the width // of the menu. @@ -146,6 +148,10 @@ Menu.propTypes = { * See [CSS API](#css-api) below for more details. */ classes: PropTypes.object.isRequired, + /** + * If `true`, the first menu item will not be auto focused. + */ + disableAutoFocus: PropTypes.bool, /** * Properties applied to the `MenuList` element. */ @@ -203,7 +209,7 @@ Menu.propTypes = { PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto']), - ]), + ]) }; Menu.defaultProps = { From 7927c6e31b329c8da9753e222ae4766e0f937b95 Mon Sep 17 00:00:00 2001 From: Wyatt Greenway Date: Tue, 26 Jun 2018 12:04:42 -0700 Subject: [PATCH 2/3] Update prop name per request of oliviertassinari --- packages/material-ui/src/Menu/Menu.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index 929e4c0d1dae44..5ac1adfc9c983a 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 && this.props.disableAutoFocus !== true) { + if (this.props.open && this.props.disableAutoFocusSelectedItem !== true) { this.focus(); } } @@ -63,7 +63,7 @@ class Menu extends React.Component { const menuList = ReactDOM.findDOMNode(this.menuList); // Focus so the scroll computation of the Popover works as expected. - if (this.props.disableAutoFocus !== true) { + if (this.props.disableAutoFocusSelectedItem !== true) { this.focus(); } @@ -151,7 +151,7 @@ Menu.propTypes = { /** * If `true`, the first menu item will not be auto focused. */ - disableAutoFocus: PropTypes.bool, + disableAutoFocusSelectedItem: PropTypes.bool, /** * Properties applied to the `MenuList` element. */ From b90c74a79a9035c77be947fa7059eb8d2651bb8d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 26 Jun 2018 22:25:50 +0200 Subject: [PATCH 3/3] ready to be merged --- .size-limit.js | 2 +- packages/material-ui/src/Menu/Menu.d.ts | 1 + packages/material-ui/src/Menu/Menu.js | 14 ++++++++------ pages/api/menu.md | 1 + 4 files changed, 11 insertions(+), 7 deletions(-) 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 5ac1adfc9c983a..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 && this.props.disableAutoFocusSelectedItem !== true) { + if (this.props.open && this.props.disableAutoFocusItem !== true) { this.focus(); } } @@ -59,11 +59,11 @@ 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. - if (this.props.disableAutoFocusSelectedItem !== true) { + if (disableAutoFocusItem !== true) { this.focus(); } @@ -94,6 +94,7 @@ class Menu extends React.Component { const { children, classes, + disableAutoFocusItem, MenuListProps, onEnter, PaperProps = {}, @@ -149,9 +150,9 @@ Menu.propTypes = { */ classes: PropTypes.object.isRequired, /** - * If `true`, the first menu item will not be auto focused. + * If `true`, the selected / first menu item will not be auto focused. */ - disableAutoFocusSelectedItem: PropTypes.bool, + disableAutoFocusItem: PropTypes.bool, /** * Properties applied to the `MenuList` element. */ @@ -209,10 +210,11 @@ Menu.propTypes = { PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto']), - ]) + ]), }; 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. |