React-md: [Autocomplete] - Autocomplete field doesn't popup over dialog window.

[artemukolov]

Description

If you add autocomplete field into modal Dialog, then autocomplete field with variants will don't show over dialog window. It's will bring scroll bar. All code snippets taken from react-md documentation.

Images/Screenshots

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

import React, { PureComponent } from 'react';
import Dialog from 'react-md/lib/Dialogs';
import Button from 'react-md/lib/Buttons/Button';
import MyDatePicker from './MyDatePicker';
import ChipsWithTextField from './ChipsWithTextField';


export default class ModalDialogExamples 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: 'Close',
          }]}
        >
          <ChipsWithTextField/>

        </Dialog>
      </div>
    );
  }
}

Version

• React 15.4.2
• React-MD 1.0.1

[mlaursen]

Welp. It might be time to research how to do #145 since this is really a problem with Menus. If that gets completed, the struggles for #197 might also be eliminated.

The way I fixed this issue with data tables is by wrapping the dialog or select field components with another div that absolutely positioned itself so it would correctly ignore the overflow-y: auto styles.