Nested Dialogs don't display correctly

Description

If you have a Dialog component with a DatePicker field inside, then when you open the DatePicker, it is displayed behind the Dialog.

If you look at the DOM, you’ll see, that when Dialog is opened, new Span element is added as a first child of Body. When DatePicker dialog is opened, then the new Span element, which contains picker’s UI is again added as a first child of Body. If I reorder these Span elements in Chrome DevTools, then DatePicker is displayed correctly.

Images/Screenshots

Link to a gist or code sample where the issue can be reproduced

App class:

import React, { PureComponent } from 'react';
import Dialog from 'react-md/lib/Dialogs';
import Button from 'react-md/lib/Buttons/Button';
import DatePicker from 'react-md/lib/Pickers/DatePickerContainer';

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { visible: false };
  }

  openDialog = () => {
    this.setState({ visible: true });
  };

  closeDialog = () => {
    this.setState({ visible: false });
  };

  render() {
    const { visible } = this.state;
    return (
      <div>
        <Button raised onClick={this.openDialog} label="Open Modal Dialog" />
        <Dialog
          id="speedBoost"
          visible={visible}
          title="Use Google's location service?"
          onHide={this.closeDialog}
          aria-labelledby="speedBoostDescription"
          modal
          actions={[
          {
            onClick: this.closeDialog,
            primary: true,
            label: 'OK',
          }]}
        >
          <DatePicker/>
        </Dialog>
      </div>
    );
  }
}

Version

• React 15.4.2,
• React-MD 1.0.1

[mlaursen]

With the latest fix, you will no longer have to do any work yourself. If any component that uses the Portal component appears within the children of the Dialog, it will automatically render as a child in the dialog instead of rendering in the document.body by default.

<Dialog id="full-page" visible={fullPageVisible} onHide={this.hideFullPage}>
  <DatePicker id="birthdate" />
  <TimePicker id="appointment-time" />
  <Drawer id="nested-drawer" { ... } />
  <Snackbar { ... } />
  <Dialog { ... } />
</Dialog>

The date picker, time picker, snackbar, drawer, and dialog should now be rendered inside of the full page dialog.

[mlaursen]

Yeah, this should be fixed in the library. I’ll think about how I want to fix it. It is really a problem with using the Portal component for dialogs – I should either update the Pickers to pass the renderNode and lastChild props correctly to the dialog, or update the z-index for .md-dialog.md-dialog--picker to be higher, or update the Portal component to optionally NOT render as a subtree (eventual feature that should be added).