Warning: Failed prop type: Invalid prop `open` of type `function` supplied to `FullscreenDialog`, expected `boolean`.

[deepank411]

Hi,

I need some help with the above warning. I obtained this when I passed a function in the open prop when calling the fullScreenDialog in the parent container.

Along with the previous warning, I also get this warning:

warning.js?8a56:36 Warning: Failed prop type: Invalid prop `lock` of type `function` supplied to `AutoLockScrolling`, expected `boolean`.

In the parent component

{this.state.isLoginModalOpen ? <UserLogin openModal={this.openLoginModal} closeModal={this.closeLoginModal} /> : null}

UserLogin component

<FullscreenDialog open={this.props.openModal}>
	<div className="Login container">
		<Icon name="times" onClick={this.props.closeModal}/>
		... (rest of the login form)
	</div>
</FullscreenDialog>

Also, the smooth scroll animation on opening the modal doesn't come the second time the modal is opened.

Please let me know if I'm doing something incorrectly and there is a better way to do this, or if some clarification is required.

[leMaik]

You get this warning because you supply a function instead of a boolean to the open prop, just as the warning tells you. The error is in this line: <FullscreenDialog open={this.props.openModal}>. The open prop toggles the open/closed state, as described in the readme.

To get the smooth animation, always mount the dialog and only toggle its open/closed state with open={this.state.isLoginModalOpen}.

[deepank411]

@leMaik What if the modal is a different component? how will you pass the state to the dialog in that case except using a prop?

Was my question wrong? I see that an invalid label has been added!

[leMaik]

Your question is valid, this is just not a bug. Sorry about that. 😉
You'll need to pass-through the open prop.

Edit: Here's an example:

class YourCustomDialog extends React.Component {
  render () {
    return (
      <MaterialFullscreenDialog open={this.props.open}>
        {/* your content here */}
      </MaterialFullscreenDialog>
    )
  }
}

And then just use it as any dialog, e.g. <YourCustomDialog open={this.state.showLoginDialog} />

[deepank411]

Thank you, your solution worked. I have just one more question.

How do I close the current modal if a new modal opens from within the current modal on button click?

[leMaik]

It's not possible; a dialog inside another dialog can't be open while the outside dialog is closed.

On the other hand: You shouldn't close that modal from a UX perspective. What if the user wants to go back? The dialogs create a hierarchie and it should be possible to go back in it. 🤔