[core] Enable innerRef on ListItem and MenuItem

Required in MenuList and missed in mui#13722
eps1lon · Feb 5, 2019 · 2814821 · 2814821
1 parent cce90f1
commit 2814821
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -28,7 +28,7 @@ module.exports = [
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '91.2 KB',
+    limit: '91.3 KB',
   },
   {
     name: 'The size of the @material-ui/styles modules',

diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
@@ -86,7 +86,7 @@ export const styles = theme => ({
 /**
  * Uses an additional container component if `ListItemSecondaryAction` is the last child.
  */
-function ListItem(props) {
+const ListItem = React.forwardRef((props, ref) => {
   const {
     alignItems,
     button,
@@ -158,6 +158,7 @@ function ListItem(props) {
           return (
             <ContainerComponent
               className={classNames(classes.container, ContainerClassName)}
+              ref={ref}
               {...ContainerProps}
             >
               <Component {...componentProps}>{children}</Component>
@@ -166,11 +167,17 @@ function ListItem(props) {
           );
         }
 
-        return <Component {...componentProps}>{children}</Component>;
+        return (
+          <Component ref={ref} {...componentProps}>
+            {children}
+          </Component>
+        );
       }}
     </MergeListContext>
   );
-}
+});
+
+ListItem.displayName = 'ListItem';
 
 ListItem.propTypes = {
   /**

diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js
@@ -27,7 +27,7 @@ export const styles = theme => ({
   selected: {},
 });
 
-function MenuItem(props) {
+const MenuItem = React.forwardRef((props, ref) => {
   const { classes, className, component, disableGutters, role, selected, ...other } = props;
 
   return (
@@ -46,10 +46,13 @@ function MenuItem(props) {
         },
         className,
       )}
+      ref={ref}
       {...other}
     />
   );
-}
+});
+
+MenuItem.displayName = 'MenuItem';
 
 MenuItem.propTypes = {
   /**