Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

material-ui-next component is initialize as hidden

I have just upgraded from material-beta to the new material-ui-text rc1. It compiles and works fine expect the components is initialized with the css property visibility set to hidden via different css classes that is applied to the components. I tried both dialog component (as in the example below) and the popover component. Same result. Both are hidden at start up.

The dialog component have this class applied .MuiModal-hidden-224. Seems wrong to me that the component is initialzed as hidden. This is the HTML of the root of the modal:

<div class="MuiModal-root-223 MuiDialog-root-216 MuiModal-hidden-224" role="dialog">

This is the react code i'm using.

   import * as React from "react";
import "./SharingDialog.less";
import Dialog from "@material-ui/core/Dialog";
import Button from "@material-ui/core/Button";

interface IProps {
    locked: boolean
}

interface IState {
    open: boolean;
    anchorEl: any;
}

export default class SharingDialog extends React.Component<IProps, IState> {

    constructor(props: IProps) {
        super(props);
        this.state = {
            open: false,
            anchorEl: null
        }
    }

    handleOpen = (event:any) => {
        this.setState({open: true, anchorEl: event.currentTarget});
    }

    handleClose() {
        this.setState({open: false})
    }

    render() {
        const { locked } = this.props;

        return (
            <div className="sharing-dialog">
                <Button>Test</Button>
                <button disabled={!locked} className="btn btn-primary" onClick={(event) => this.handleOpen(event)}>Open modal</button>
                <Dialog
                open={this.state.open}>                    
                    <div className="sharing-dialog-component">
                        Testing
                    </div>

                </Dialog>
            </div>
        )
    }
}

What am i doing wrong? Why does the modal start up as hidden?

like image 259
Poku Avatar asked May 17 '18 10:05

Poku


People also ask

What is XS MUI?

xs, extra-small: 0px. sm, small: 600px. md, medium: 900px. lg, large: 1200px.

What is material UI next?

Material UI offers React components for faster and easier web development. You can create your own design system, or start with Material Design. You can find much useful information on their websites and the components you would like to use in your project.

Can I install only one component from MUI?

Unfortunately, you can't install the separate components from the Material UI. The only way is to install the @material-ui/core directly.

What is hidden in material UI?

Material UI Hidden component is used to change the visibility of any other component. We can use this component to hide a component even on different breakpoints. For example, if you have one sidebar that you want to hide on small screen devices, you can use this component with breakpoints.


1 Answers

I had the same issue. It appears updating to React 16.3.2 will fix the problem.

https://github.com/mui-org/material-ui/issues/11414

like image 66
Seth Duncan Avatar answered Sep 27 '22 20:09

Seth Duncan