Repository: mui/material-ui (TypeScript)
Date: 2019-08-22 19:40:01+00:00
Task type: Bug Fix

Issue:
BackDrop component does not render children
<!-- Checked checkbox should look like this: [x] -->

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯
Backdrop does not render children content.

## Expected Behavior 🤔
Backdrop should render children.

## Steps to Reproduce 🕹
https://codesandbox.io/s/create-react-app-t695r

The issue is with the implementation of Backdrop
https://github.com/mui-org/material-ui/blob/aa4e2dbf3ad98355d2e43cdd281f0ea2c2204046/packages/material-ui/src/Backdrop/Backdrop.js#L32-L47

children gets spread into Fade, but the nested div will just overwrite that.

I recommend doing this instead:
```javascript
const Backdrop = React.forwardRef(function Backdrop(props, ref) {
  const { classes, className, invisible = false, open, transitionDuration, children, ...other } = props;

  return (
    <Fade in={open} timeout={transitionDuration} {...other}>
      <div
        data-mui-test="Backdrop"
        className={clsx(
          classes.root,
          {
            [classes.invisible]: invisible,
          },
          className,
        )}
        aria-hidden
        ref={ref}
      >
        {children}
      </ div>
    </Fade>
  );
});
```

## Context 🔦
I'm trying to create a full screen loader with a backdrop and the loading indicator doesn't get rendered because the Backdrop component only renders the div.

## Your Environment 🌎
| Tech        | Version |
| ----------- | ------- |
| Material-UI | v4.3.2  |
| React       |     ^16.8.0    |
| Browser     |   Firefox 68.0.2      |
| TypeScript  |    3.5.3     |



Issue discussion:
> I'm trying to create a full screen loader with a backdrop and the loading indicator doesn't get rendered because the Backdrop component only renders the div.

@dominictwlee Interesting, I like the idea. What do you think of this diff?
```diff
diff --git a/packages/material-ui/src/Backdrop/Backdrop.js b/packages/material-ui/src/Backdrop/Backdrop.js
index 7caba73eb..3b8aea3d0 100644
--- a/packages/material-ui/src/Backdrop/Backdrop.js
+++ b/packages/material-ui/src/Backdrop/Backdrop.js
@@ -9,6 +9,9 @@ export const styles = {
   root: {
     zIndex: -1,
     position: 'fixed',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     right: 0,
     bottom: 0,
     top: 0,
@@ -26,7 +29,15 @@ export const styles = {
 };

 const Backdrop = React.forwardRef(function Backdrop(props, ref) {
-  const { classes, className, invisible = false, open, transitionDuration, ...other } = props;
+  const {
+    children,
+    classes,
+    className,
+    invisible = false,
+    open,
+    transitionDuration,
+    ...other
+  } = props;

   return (
     <Fade in={open} timeout={transitionDuration} {...other}>
@@ -41,7 +52,9 @@ const Backdrop = React.forwardRef(function Backdrop(props, ref) {
         )}
         aria-hidden
         ref={ref}
-      />
+      >
+        {children}
+      </div>
     </Fade>
   );
 });
```

Then, we should be able to do
```tsx
import React from 'react';
import Backdrop from '@material-ui/core/Backdrop';
import CircularProgress from '@material-ui/core/CircularProgress';

export default () => {
  return <Backdrop open><CircularProgress style={{ color: 'white' }} /></Backdrop>
}
```

![Capture d’écran 2019-08-21 à 13 46 18](https://user-images.githubusercontent.com/3165635/63429425-4823a480-c41a-11e9-9967-e947866c488f.png)

Do you want to submit a pull request? :)
Yeah sure, I'll get on it, thanks.

Solution patch:
diff --git a/packages/material-ui/src/Backdrop/Backdrop.js b/packages/material-ui/src/Backdrop/Backdrop.js
--- a/packages/material-ui/src/Backdrop/Backdrop.js
+++ b/packages/material-ui/src/Backdrop/Backdrop.js
@@ -9,6 +9,9 @@ export const styles = {
   root: {
     zIndex: -1,
     position: 'fixed',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     right: 0,
     bottom: 0,
     top: 0,
@@ -26,7 +29,15 @@ export const styles = {
 };
 
 const Backdrop = React.forwardRef(function Backdrop(props, ref) {
-  const { classes, className, invisible = false, open, transitionDuration, ...other } = props;
+  const {
+    children,
+    classes,
+    className,
+    invisible = false,
+    open,
+    transitionDuration,
+    ...other
+  } = props;
 
   return (
     <Fade in={open} timeout={transitionDuration} {...other}>
@@ -41,7 +52,9 @@ const Backdrop = React.forwardRef(function Backdrop(props, ref) {
         )}
         aria-hidden
         ref={ref}
-      />
+      >
+        {children}
+      </div>
     </Fade>
   );
 });


Test patch:
diff --git a/packages/material-ui/src/Backdrop/Backdrop.test.js b/packages/material-ui/src/Backdrop/Backdrop.test.js
--- a/packages/material-ui/src/Backdrop/Backdrop.test.js
+++ b/packages/material-ui/src/Backdrop/Backdrop.test.js
@@ -1,18 +1,16 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils';
+import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '../test-utils/describeConformance';
 import Backdrop from './Backdrop';
 
 describe('<Backdrop />', () => {
   let mount;
-  let shallow;
   let classes;
 
   before(() => {
     // StrictModeViolation: uses Fade
     mount = createMount({ strict: false });
-    shallow = createShallow({ dive: true });
     classes = getClasses(<Backdrop open />);
   });
 
@@ -32,9 +30,12 @@ describe('<Backdrop />', () => {
     ],
   }));
 
-  it('should render a backdrop div', () => {
-    const wrapper = shallow(<Backdrop open className="woofBackdrop" />);
-    assert.strictEqual(wrapper.childAt(0).hasClass('woofBackdrop'), true);
-    assert.strictEqual(wrapper.childAt(0).hasClass(classes.root), true);
+  it('should render a backdrop div with content of nested children', () => {
+    const wrapper = mount(
+      <Backdrop open className="woofBackdrop">
+        <h1>Hello World</h1>
+      </Backdrop>,
+    );
+    assert.strictEqual(wrapper.contains(<h1>Hello World</h1>), true);
   });
 });